심화 가이드
테스트

코드 커버리지

코드 커버리지 보고서로 코드 중에서 단위 테스트가 충분히 이루어지지 않은 부분을 확인할 수 있습니다.

사전 준비

Vitest로 코드 커버리지 보고서를 생성하려면 @vitest/coverage-v8 패키지를 설치해야 합니다.

보고서 생성하기

커버리지 보고서를 생성하려면 ng test 명령에 --coverage 플래그를 추가하세요.

ng test --coverage

테스트가 실행되면 프로젝트에 coverage/ 디렉터리가 새로 생성됩니다. index.html 파일을 열면 소스 코드와 코드 커버리지 수치가 담긴 보고서를 확인할 수 있습니다.

테스트를 실행할 때마다 코드 커버리지 보고서를 생성하려면 angular.json 파일에서 coverage 옵션을 true로 설정하세요.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true
          }
        }
      }
    }
  }
}

코드 커버리지 최솟값 적용하기

코드 커버리지 비율로 코드가 얼마나 테스트되었는지 가늠할 수 있습니다. 팀에서 단위 테스트로 검증할 최소 비율을 정했다면 설정을 통해 이 기준을 적용할 수 있습니다.

예를 들어 코드 커버리지를 최소 80%로 유지하려면 angular.json 파일에 coverageThresholds 옵션을 추가하세요.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true,
            "coverageThresholds": {
              "statements": 80,
              "branches": 80,
              "functions": 80,
              "lines": 80
            }
          }
        }
      }
    }
  }
}

이제 테스트를 실행했을 때 커버리지가 80%보다 낮으면 명령이 실패합니다.

고급 설정

angular.json 파일에서 다음 커버리지 옵션도 설정할 수 있습니다.

  • coverageInclude: 커버리지 보고서에 포함할 파일의 glob 패턴입니다.
  • coverageExclude: 커버리지 보고서에서 제외할 파일의 glob 패턴입니다.
  • coverageReporters: 사용할 리포터의 배열입니다. 예를 들어 html, lcov, json을 사용할 수 있습니다.
  • coverageWatermarks: HTML 리포터에 사용할 [low, high] 기준값을 지정하는 객체입니다. 보고서의 색상 구분에 영향을 줄 수 있습니다.
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true,
            "coverageReporters": ["html", "lcov"],
            "coverageWatermarks": {
              "statements": [50, 80],
              "branches": [50, 80],
              "functions": [50, 80],
              "lines": [50, 80]
            }
          }
        }
      }
    }
  }
}