Web/Angular

2023년 Angular 테스트의 변화 과거, 현재, 그리고 미래

이영훈닷컴 2025. 3. 4. 09:32
728x90

Angular 16이 출시되면서 테스트 환경에도 큰 변화가 찾아왔습니다. 기존의 Karma는 더 이상 Angular의 공식 테스트 프레임워크로 지원되지 않으며, 대신 Jest가 실험적으로 도입되었습니다. 그렇다면 왜 Karma가 deprecated 되었고, Jest는 어떤 장점과 단점을 가지고 있을까요? 이번 블로그 포스트에서는 Angular 테스트의 과거, 현재, 그리고 미래에 대해 알아보겠습니다.

Angular 테스트의 과거: Karma와 Jasmine

Angular 개발자라면 익숙한 Karma와 Jasmine 조합은 오랜 시간 동안 Angular의 기본 테스트 환경으로 자리 잡아왔습니다. Karma는 브라우저를 실행하고, Jasmine 테스트를 브라우저 안에서 수행하게 해주는 역할을 합니다. 브라우저 환경에서 테스트를 실행하면 Web API와 같은 브라우저의 기능을 활용할 수 있다는 장점이 있지만, 브라우저 자체가 추가적인 오버헤드를 발생시킨다는 단점도 있습니다.

현재의 대안: Jest

Jest는 Facebook(현재의 Meta)에서 Jasmine을 기반으로 성능을 개선한 테스트 프레임워크입니다. Jest는 브라우저 대신 jsdom이라는 DOM 에뮬레이터를 사용해 테스트를 실행합니다. 덕분에 브라우저 오버헤드를 줄일 수 있지만, 브라우저에서만 가능한 일부 기능(예: 오디오 태그 재생, 로컬 스토리지 저장 등)은 사용할 수 없습니다. 하지만 대부분의 테스트에서는 이러한 기능이 필요하지 않기 때문에 큰 문제가 되지 않습니다.

Jest의 주요 장점은 다음과 같습니다:

  • 병렬 실행: 테스트를 여러 스레드에서 동시에 실행하여 속도를 높입니다.
  • Watch 모드: 코드 변경 시 영향을 받는 테스트만 실행하여 시간을 절약합니다.

하지만 Jest는 Angular와의 통합 과정에서 몇 가지 문제를 겪었습니다. 특히, ECMAScript Modules(ESM) 지원이 부족하여 성능 저하와 오류가 발생하는 경우가 있었습니다. 다행히 최근에는 OpenSource Foundation의 지원과 커뮤니티 기여로 ESM 지원이 개선되고 있습니다.

Angular 16에서의 변화: Jest 공식 지원

Angular 16에서는 Jest를 공식적으로 지원하기 시작했습니다. 다만, 현재는 실험적인 단계로, 이를 바로 프로덕션 환경에 도입하기에는 한계가 있습니다. Angular는 Jest의 빌드 과정을 직접 처리하여, 기존의 성능 문제를 해결하고 있습니다. 또한, Angular 팀은 기존의 Webpack 대신 esbuild를 사용하여 빌드 속도를 최대 50~100배까지 개선할 가능성을 열어두고 있습니다.

미래의 Angular 테스트: Jasmine과 ModernWeb

Karma가 deprecated 되었지만, Jasmine은 여전히 Angular의 테스트 프레임워크로 사용됩니다. 향후 Angular는 ModernWeb의 web-test-runner를 도입하여 브라우저 컨텍스트를 제공할 예정입니다. 이는 Angular 17에서 도입될 가능성이 높으며, 개발자 입장에서는 큰 변경 없이 자연스럽게 전환이 이루어질 것으로 보입니다.

결론

2023년은 Angular 테스트 환경에 있어 큰 전환점이 되는 해입니다. Jest의 공식 지원과 Karma의 ModernWeb 대체는 Angular의 테스트 경험을 더욱 현대화하고 효율적으로 만들어줄 것입니다. Angular의 테스트 환경은 앞으로도 발전을 거듭하며, 개발자들에게 더 나은 도구와 경험을 제공할 것입니다.

Angular 16의 새로운 테스트 환경을 직접 시도해보고 싶다면, 다음 단계를 참고하세요:

  1. angular.json 파일에서 테스트 빌더를 @angular-devkit/build-angular:karma에서 @angular-devkit/build-angular:jest로 변경합니다.
  2. 필요한 의존성을 설치합니다: npm install -D jest @types/jest jest-environment-jsdom.
  3. tsconfig.spec.json 파일에서 types 값을 jasmine에서 jest로 변경합니다.
  4. npx ng test 명령어로 테스트를 실행합니다.

Angular 16의 테스트 환경 변화를 미리 경험하며 미래를 준비해보세요!