Angular 21은 Vitest를 Jasmine과 Karma를 대체하는 새로운 기본 테스트 프레임워크로 채택하여, 더 빠르고 강력한 테스트 환경을 제공합니다. 🚀
기존 Angular 애플리케이션에 Vitest를 적용하려면 vitest와 브라우저 환경을 에뮬레이션하는 jsdom 라이브러리를 개발 의존성으로 설치해야 합니다. 📦
angular.json 파일의 architect.test 타겟에서 빌더를 @angular/build:unit-test로 교체하고, Karma 관련 옵션들을 제거해야 합니다. ⚙️
Vitest로의 마이그레이션 후에는 Karma 설정 파일과 관련 NPM 패키지들을 안전하게 제거할 수 있습니다. 🗑️
Vitest의 API는 Jasmine과 매우 유사하여, 기존 유닛 테스트 코드를 크게 수정하지 않고도 Vitest로 실행할 수 있습니다 (예: describe, it, beforeEach 등). 🤝
fdescribe/fit 대신 describe.only/it.only와 같은 Vitest 고유의 API를 사용해야 하며, tsconfig.spec.json에서 Jasmine 타입 대신 vitest/globals 타입을 사용하거나 TypeScript 참조를 통해 타입 정의 문제를 해결할 수 있습니다. 💡
전역 스코프 오염 방지 및 타입 정의 간소화를 위해 describe, expect 등의 함수를 Vitest 패키지에서 명시적으로 ES6 모듈 임포트하는 것이 권장됩니다. ➕
Angular 21은 --add-imports 플래그와 함께 Vitest 전역 함수를 임포트로 자동 변환해주는 실험적 마이그레이션 스키매틱을 제공하여 마이그레이션을 돕습니다. 🛠️
일관된 테스트 코드 작성을 위해 runnerConfig 옵션을 사용하여 vitest.config.ts 파일에서 전역 함수 사용을 비활성화할 수 있습니다. 🚫
jsdom을 통한 시뮬레이션 외에, 패키지를 설치하고 또는 에서 옵션을 설정하여 실제 브라우저(Chromium, Firefox, Webkit) 환경에서 테스트를 실행할 수 있습니다. 🌐
@vitest/browser-playwright
angular.json
vitest.config.ts
browsers
AI 기반 테스트, 수정, 검증 에이전트인 TestSprite가 소개되었으며, 개발 워크플로우에 AI 도구를 통합하려는 사용자에게 유용할 수 있습니다. 🤖
