단위 테스트

Angular 애플리케이션을 테스트하면 예상대로 동작하는지 확인할 수 있습니다. 단위 테스트는 버그를 일찍 발견하고 코드 품질을 유지하며 안전하게 리팩토링하는 데 중요합니다.

참고: 이 문서는 새 Angular CLI 프로젝트의 기본 테스트 환경인 Vitest를 설명합니다. 기존 프로젝트를 Karma에서 이전하려면 Karma에서 Vitest로 이전하기를 참고하세요. Karma도 계속 지원합니다. 자세한 내용은 Karma 테스트 문서를 참고하세요.

테스트 환경 설정하기

Angular CLI는 Vitest 테스트 프레임워크로 Angular 애플리케이션을 테스트하는 데 필요한 모든 항목을 내려받아 설치합니다. 새 프로젝트에는 기본으로 vitest와 jsdom이 포함됩니다.

Vitest는 Node.js 환경에서 단위 테스트를 실행합니다. 브라우저 DOM은 jsdom 라이브러리로 재현합니다. 브라우저를 실행하는 데 드는 부담을 줄여 테스트를 더 빠르게 실행할 수 있습니다. happy-dom과 같은 대안을 설치하고 jsdom을 제거하면 라이브러리를 교체할 수 있습니다. 현재 지원하는 DOM 에뮬레이션 라이브러리는 jsdom과 happy-dom입니다.

CLI로 생성한 프로젝트는 바로 테스트할 수 있습니다. ng test 명령을 실행하세요.

ng test

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

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

✓ src/app/app.spec.ts (2)
  ✓ App should create the app
  ✓ App should render title
Test Files  1 passed (1)
     Tests  2 passed (2)
  Start at  18:18:01
  Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)

ng test 명령은 파일 변경도 감시합니다. 파일을 수정하고 저장하면 테스트가 다시 실행됩니다.

환경 설정

Angular CLI가 Vitest 설정 대부분을 처리합니다. angular.json 파일의 test 대상 옵션을 수정하면 테스트 동작을 변경할 수 있습니다.

Angular.json 옵션

include: 테스트에 포함할 파일의 glob 패턴입니다. 기본값은 ['**/*.spec.ts', '**/*.test.ts']입니다.
exclude: 테스트에서 제외할 파일의 glob 패턴입니다.
setupFiles: 테스트 전에 실행할 전역 설정 파일의 경로 목록입니다. 폴리필이나 전역 목 등을 설정할 수 있습니다.
providersFile: 테스트 환경에서 사용할 Angular 프로바이더 배열을 기본으로 내보내는 파일의 경로입니다. 테스트에 주입할 전역 테스트 프로바이더를 설정할 때 유용합니다.
coverage: 코드 커버리지 보고서를 활성화하거나 비활성화하는 불리언 값입니다. 기본값은 false입니다.
browsers: 실제 브라우저에서 테스트를 실행할 때 사용할 브라우저 이름 배열입니다. 예를 들어 ["chromium"]을 지정합니다. 브라우저 프로바이더가 설치되어 있어야 합니다. 자세한 내용은 브라우저에서 테스트 실행하기를 참고하세요.

전역 테스트 설정과 프로바이더

setupFiles와 providersFile 옵션은 전역 테스트 설정을 관리할 때 특히 유용합니다.

예를 들어 모든 테스트에 provideHttpClientTesting을 제공하려면 src/test-providers.ts 파일을 만들 수 있습니다.

src/test-providers.ts

import {EnvironmentProviders, Provider} from '@angular/core';
import {provideHttpClientTesting} from '@angular/common/http/testing';

const testProviders: (Provider | EnvironmentProviders)[] = [provideHttpClientTesting()];

export default testProviders;

그런 다음 angular.json에서 이 파일을 참조합니다.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "providersFile": "src/test-providers.ts"
          }
        }
      }
    }
  }
}

참고: src/test-providers.ts처럼 테스트 설정이나 프로바이더용 TypeScript 파일을 새로 만들 때는 프로젝트의 테스트용 TypeScript 설정 파일(일반적으로 tsconfig.spec.json)에 포함해야 합니다. 그래야 테스트할 때 TypeScript 컴파일러가 이 파일을 올바르게 처리할 수 있습니다.

Vitest 고급 설정

고급 설정이 필요하면 angular.json의 runnerConfig 옵션으로 커스텀 Vitest 설정 파일을 제공할 수 있습니다.

중요: 커스텀 설정으로 고급 옵션을 사용할 수 있지만, Angular 팀은 설정 파일의 내용이나 서드 파티 플러그인을 지원하지 않습니다. 또한 CLI는 올바르게 통합하기 위해 일부 프로퍼티(test.projects, test.include)를 덮어씁니다.

Vitest 설정 파일(예: vitest-base.config.ts)을 만들고 angular.json에서 참조하세요.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runnerConfig": "vitest-base.config.ts"
          }
        }
      }
    }
  }
}

CLI로 기본 설정 파일을 생성할 수도 있습니다.

ng generate config vitest

수정해서 사용할 수 있는 vitest-base.config.ts 파일이 생성됩니다.

참고: Vitest 설정에 대한 자세한 내용은 공식 Vitest 문서를 참고하세요.

코드 커버리지

ng test 명령에 --coverage 플래그를 추가하면 코드 커버리지 보고서를 생성할 수 있습니다. 보고서는 coverage/ 디렉터리에 생성됩니다.

자세한 내용은 코드 커버리지 문서를 참고하세요.

브라우저에서 테스트 실행하기

대부분의 단위 테스트는 기본 Node.js 환경에서 더 빠르게 실행되지만, 실제 브라우저에서 실행할 수도 있습니다. 렌더링처럼 브라우저 전용 API에 의존하는 테스트나 디버깅에 유용합니다.

브라우저에서 테스트를 실행하려면 먼저 브라우저 프로바이더를 설치해야 합니다. Vitest의 브라우저 모드는 공식 문서를 참고하세요.

프로바이더를 설치한 후 angular.json에 browsers 옵션을 설정하거나 CLI의 --browsers 플래그를 사용하면 브라우저에서 테스트를 실행할 수 있습니다. 기본으로 브라우저 창이 표시됩니다. CI 환경 변수가 설정되어 있으면 헤드리스 모드를 사용합니다. 헤드리스 모드를 명시하려면 브라우저 이름 뒤에 Headless를 붙이세요. 예를 들어 chromiumHeadless로 지정합니다.

# Example for Playwright (headed)
ng test --browsers=chromium

# Example for Playwright (headless)
ng test --browsers=chromiumHeadless

# Example for WebdriverIO (headed)
ng test --browsers=chrome

# Example for WebdriverIO (headless)
ng test --browsers=chromeHeadless

필요에 맞게 다음 브라우저 프로바이더 중 하나를 선택하세요.

ng test

대부분의 CI 서버는 CI=true 환경 변수를 설정하며, ng test는 이를 감지합니다. 그러면 사용자 입력 없이 테스트를 한 번만 실행하도록 자동으로 설정됩니다.

CI 서버가 이 변수를 설정하지 않거나 한 번만 실행하도록 직접 지정해야 한다면 --no-watch와 --no-progress 플래그를 사용하세요.

ng test --no-watch --no-progress

테스트 더 알아보기

애플리케이션의 테스트 환경을 설정했다면 다음 문서도 확인해 보세요.

문서	설명
코드 커버리지	테스트가 애플리케이션을 얼마나 검증하는지 확인하고 필요한 비율을 지정하는 방법입니다.
서비스 테스트하기	애플리케이션에서 사용하는 서비스를 테스트하는 방법입니다.
컴포넌트 테스트 기초	Angular 컴포넌트 테스트의 기초를 알아봅니다.
컴포넌트 테스트 시나리오	여러 종류의 컴포넌트 테스트 시나리오와 사용 사례입니다.
어트리뷰트 디렉티브 테스트하기	어트리뷰트 디렉티브를 테스트하는 방법입니다.
파이프 테스트하기	파이프를 테스트하는 방법입니다.
테스트 디버깅하기	테스트에서 자주 발생하는 버그를 알아봅니다.
테스트 유틸리티 API	Angular의 테스트 기능입니다.

단위 테스트

테스트 환경 설정하기

환경 설정

Angular.json 옵션

전역 테스트 설정과 프로바이더

src/test-providers.ts

Vitest 고급 설정

코드 커버리지

브라우저에서 테스트 실행하기

Playwright

npm

yarn

pnpm

bun

WebdriverIO

npm

yarn

pnpm

bun

Preview

npm

yarn

pnpm

bun

다른 테스트 프레임워크

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

테스트 더 알아보기