커버리지
Vitest는 v8을 통한 네이티브 코드 커버리지와 istanbul을 통한 계측된 코드 커버리지를 지원합니다.
커버리지 제공자
TIP
Vitest v0.22.0 이상
v8과 istanbul은 선택적으로 사용할 수 있습니다. 기본적으로 v8이 사용됩니다.
test.coverage.provider를 v8 또는 istanbul로 설정하여 커버리지 도구를 선택할 수 있습니다.
// vite.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
coverage: {
provider: 'istanbul', // 또는 'v8'
},
},
});Vitest 프로세스를 시작하면 해당 지원 패키지를 자동으로 설치할지 묻는 메시지가 표시됩니다.
또는 수동으로 설치하려면 다음 명령을 실행하십시오.
# v8의 경우
npm i -D @vitest/coverage-v8
# istanbul의 경우
npm i -D @vitest/coverage-istanbul커버리지 설정
커버리지를 활성화한 상태로 테스트를 실행하려면 CLI에서 --coverage 플래그를 사용하십시오. 기본적으로 reporter는 ['text', 'html', 'clover', 'json']이 사용됩니다.
{
"scripts": {
"test": "vitest",
"coverage": "vitest run --coverage"
}
}구성 파일에서 test.coverage 옵션을 설정하여 커버리지를 구성할 수 있습니다.
// vite.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
coverage: {
reporter: ['text', 'json', 'html'],
},
},
});사용자 정의 커버리지 제공자
test.coverage.provider에 'custom'을 전달하여 사용자 정의 커버리지 제공자를 사용할 수도 있습니다.
// vite.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
coverage: {
provider: 'custom',
customProviderModule: 'my-custom-coverage-provider',
},
},
});사용자 정의 제공자는 customProviderModule 옵션을 통해 CoverageProviderModule을 로드할 모듈 이름 또는 경로를 지정해야 합니다. CoverageProviderModule은 기본 내보내기(default export)로 구현된 객체를 내보내야 합니다.
// my-custom-coverage-provider.ts
import type {
CoverageProvider,
CoverageProviderModule,
ResolvedCoverageOptions,
Vitest,
} from 'vitest';
const CustomCoverageProviderModule: CoverageProviderModule = {
getProvider(): CoverageProvider {
return new CustomCoverageProvider();
},
// Implements rest of the CoverageProviderModule ...
};
class CustomCoverageProvider implements CoverageProvider {
name = 'custom-coverage-provider';
options!: ResolvedCoverageOptions;
initialize(ctx: Vitest) {
this.options = ctx.config.coverage;
}
// Implements rest of the CoverageProvider ...
}
export default CustomCoverageProviderModule;자세한 내용은 타입 정의를 참조하십시오.
기본 커버리지 폴더 위치 변경
커버리지 보고서를 실행하면 프로젝트의 루트 디렉터리에 coverage 폴더가 생성됩니다. 다른 디렉터리로 변경하려면 vite.config.js 파일에서 test.coverage.reportsDirectory 속성을 사용하십시오.
import { defineConfig } from 'vite';
export default defineConfig({
test: {
coverage: {
reportsDirectory: './tests/unit/coverage',
},
},
});코드 무시
두 커버리지 제공자 모두 커버리지 보고서에서 코드를 제외하는 방법이 다릅니다.
TypeScript를 사용하는 경우 소스 코드는 esbuild를 사용하여 트랜스파일되며, 이는 소스 코드에서 모든 주석을 제거합니다 (esbuild#516). 법적 주석으로 간주되는 주석은 유지됩니다.
istanbul 제공자의 경우 무시 주석에 @preserve 키워드를 포함할 수 있습니다. 이러한 무시 주석이 최종 프로덕션 빌드에 포함될 수 있으므로 주의해야 합니다.
-/* istanbul ignore if */
+/* istanbul ignore if -- @preserve */
if (condition) {v8의 경우 이로 인해 문제가 발생하지 않습니다. 평소와 같이 Typescript와 함께 c8 ignore 주석을 사용할 수 있습니다.
/* c8 ignore next 3 */
if (condition) {기타 옵션
커버리지의 모든 구성 옵션을 보려면 커버리지 구성 참조를 참조하십시오.
Vitest UI
Vitest 0.31.0부터 Vitest UI에서 커버리지 보고서를 확인할 수 있습니다.
Vitest UI는 커버리지 보고서가 명시적으로 활성화되어 있고 HTML 커버리지 리포터가 설정되어 있을 때만 커버리지 보고 기능을 활성화합니다. 그렇지 않은 경우에는 사용할 수 없습니다.
- 구성에서
coverage.enabled=true를 활성화하거나--coverage.enabled=true플래그로 Vitest를 실행합니다. coverage.reporters목록에html을 추가합니다.subdir옵션을 사용하여 커버리지 보고서를 하위 디렉터리에 저장할 수도 있습니다.
