심화 가이드
테스트

Karma와 Jasmine으로 테스트하기

새 Angular 프로젝트의 기본 테스트 러너는 Vitest이지만, Karma도 계속 지원하며 널리 사용됩니다. 이 문서에서는 Karma 테스트 러너와 Jasmine 테스트 프레임워크로 Angular 애플리케이션을 테스트하는 방법을 알아봅니다.

Karma와 Jasmine 설정하기

새 프로젝트에 Karma와 Jasmine을 설정하거나 기존 프로젝트에 추가할 수 있습니다.

새 프로젝트에 설정하기

Karma와 Jasmine이 설정된 새 프로젝트를 생성하려면 ng new 명령에 --test-runner=karma 옵션을 사용하세요.

ng new my-karma-app --test-runner=karma

기존 프로젝트에 추가하기

기존 프로젝트에 Karma와 Jasmine을 추가하려면 다음 순서로 진행하세요.

  1. 필요한 패키지를 설치합니다.

  1. angular.json에 테스트 러너를 설정합니다.

    angular.json 파일에서 test 대상을 찾아 runner 옵션을 karma로 지정합니다.

    {
  // ...
  "projects": {
    "your-project-name": {
      // ...
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runner": "karma"
            // ... 다른 옵션
          }
        }
      }
    }
  }
}

  2. Jasmine 타입을 사용하도록 tsconfig.spec.json을 수정합니다.

    TypeScript가 describe, it과 같은 전역 테스트 함수를 인식할 수 있도록 tsconfig.spec.json의 types 배열에 "jasmine"을 추가합니다.

    {
  // ...
  "compilerOptions": {
    // ...
    "types": ["jasmine"]
  }
  // ...
}

테스트 실행하기

프로젝트 설정이 끝나면 ng test 명령으로 테스트를 실행합니다.

ng test

ng test 명령은 애플리케이션을 파일 감시 모드 로 빌드하고 Karma 테스트 러너를 실행합니다.

콘솔에는 다음과 같이 출력됩니다.

02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
TOTAL: 3 SUCCESS

테스트 결과는 Karma Jasmine HTML Reporter를 통해 브라우저에 표시됩니다.

브라우저에 표시된 Jasmine HTML Reporter

테스트 행을 클릭하면 해당 테스트만 다시 실행합니다. 설명을 클릭하면 선택한 테스트 그룹("테스트 스위트")에 속한 테스트를 다시 실행합니다.

한편 ng test 명령은 파일 변경을 감시하고 있습니다. 소스 파일을 조금 수정하고 저장해 보세요. 테스트가 다시 실행되고 브라우저가 새로고침되면서 새 테스트 결과가 표시됩니다.

환경 설정

Angular CLI가 Jasmine과 Karma의 환경 설정을 처리합니다. angular.json 파일에 지정한 옵션을 기반으로 전체 설정을 메모리에 구성합니다.

Karma 설정 변경하기

Karma 설정을 직접 변경하려면 다음 명령으로 karma.conf.js를 생성하세요.

ng generate config karma

참고: 자세한 내용은 Karma 설정 가이드를 참고하세요.

angular.json에서 테스트 러너 지정하기

프로젝트의 테스트 러너를 Karma로 명시하려면 angular.json 파일의 test 대상에서 runner 옵션을 karma로 지정하세요.

{
  // ...
  "projects": {
    "your-project-name": {
      // ...
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runner": "karma"
            // ... 다른 옵션
          }
        }
      }
    }
  }
}

코드 커버리지 기준 적용하기

최소 코드 커버리지 기준을 적용하려면 karma.conf.js 파일의 coverageReporter 영역에서 check 프로퍼티를 사용하세요.

예를 들어 커버리지를 최소 80%로 유지하려면 다음과 같이 설정합니다.

coverageReporter: {
  dir: require('path').join(__dirname, './coverage/<project-name>'),
  subdir: '.',
  reporters: [
    { type: 'html' },
    { type: 'text-summary' }
  ],
  check: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80
    }
  }
}

지정한 커버리지 기준에 미치지 못하면 테스트 실행이 실패합니다.

지속적 통합 환경에서 테스트하기

CI 환경에서 Karma 테스트를 실행하려면 다음 명령을 사용하세요.

ng test --no-watch --no-progress --browsers=ChromeHeadless

참고: CI 환경에서 Karma가 테스트를 한 번 실행하고 정상적으로 종료되도록 하려면 --no-watch와 --no-progress 플래그가 중요합니다. 그래픽 인터페이스가 없는 브라우저 환경에서 테스트를 실행하려면 --browsers=ChromeHeadless 플래그도 필요합니다.

테스트 디버깅하기

테스트가 예상대로 동작하지 않으면 브라우저에서 확인하고 디버깅할 수 있습니다.

Karma 테스트 러너로 애플리케이션을 디버깅하려면 다음 순서로 진행하세요.

  1. Karma 브라우저 창을 엽니다. 도움이 필요하면 테스트 환경 설정하기를 참고하세요.
  2. DEBUG 버튼을 클릭하면 새 브라우저 탭이 열리고 테스트가 다시 실행됩니다.
  3. 브라우저 개발자 도구를 엽니다. Windows에서는 Ctrl-Shift-I, macOS에서는 Command-Option-I를 누르세요.
  4. Sources 영역을 선택합니다.
  5. Control/Command-P를 누르고 테스트 파일 이름을 입력해서 파일을 엽니다.
  6. 테스트에 중단점을 설정합니다.
  7. 브라우저를 새로고침하면 중단점에서 실행이 멈추는 것을 확인할 수 있습니다.
Karma 디버깅 화면