커버리지

Vitest는 v8을 통한 네이티브 코드 커버리지와 istanbul을 통한 계측된 코드 커버리지를 지원합니다.

커버리지 제공자

TIP

Vitest v0.22.0 이상

v8과 istanbul은 선택적으로 사용할 수 있습니다. 기본적으로 v8이 사용됩니다.

test.coverage.provider를 v8 또는 istanbul로 설정하여 커버리지 도구를 선택할 수 있습니다.

// vitest.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

커버리지 설정

TIP

구성 파일에 항상 coverage.include를 정의하는 것이 좋습니다. 이렇게 하면 Vitest가 coverage.all에서 선택하는 파일 수를 줄일 수 있습니다.

커버리지를 활성화한 상태로 테스트를 실행하려면 CLI에서 --coverage 플래그를 사용하십시오. 기본적으로 reporter는 ['text', 'html', 'clover', 'json']이 사용됩니다.

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

구성 파일에서 test.coverage 옵션을 설정하여 커버리지를 구성할 수 있습니다.

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },
});

사용자 정의 커버리지 리포터

test.coverage.reporter에서 패키지 이름 또는 절대 경로를 전달하여 사용자 정의 커버리지 리포터를 사용할 수 있습니다.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      reporter: [
        // NPM 패키지 이름을 사용하여 리포터 지정
        ['@vitest/custom-coverage-reporter', { someOption: true }],

        // 로컬 경로를 사용하여 리포터 지정
        '/absolute/path/to/custom-reporter.cjs',
      ],
    },
  },
});

사용자 정의 리포터는 Istanbul에서 로드되며 해당 리포터 인터페이스와 일치해야 합니다. 참고 자료는 내장 리포터 구현을 참조하십시오.

// custom-reporter.cjs
const { ReportBase } = require('istanbul-lib-report');

module.exports = class CustomReporter extends ReportBase {
  constructor(opts) {
    super();

    // 구성에서 전달된 옵션은 여기에서 사용할 수 있습니다.
    this.file = opts.file;
  }

  onStart(root, context) {
    this.contentWriter = context.writer.writeFile(this.file);
    this.contentWriter.println('Start of custom coverage report');
  }

  onEnd() {
    this.contentWriter.println('End of custom coverage report');
    this.contentWriter.close();
  }
};

사용자 정의 커버리지 제공자

test.coverage.provider에 'custom'을 전달하여 사용자 정의 커버리지 제공자를 사용할 수도 있습니다.

// vitest.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',
    },
  },
});

코드 무시

두 커버리지 제공자 모두 커버리지 보고서에서 코드를 제외하는 방법이 다릅니다.

• v8
• ìstanbul

TypeScript를 사용하는 경우 소스 코드는 esbuild를 사용하여 트랜스파일되며, 이는 소스 코드에서 모든 주석을 제거합니다 (esbuild#516). 법적 주석으로 간주되는 주석은 유지됩니다.

istanbul 제공자의 경우 무시 주석에 @preserve 키워드를 포함할 수 있습니다. 이러한 무시 주석이 최종 프로덕션 빌드에 포함될 수 있으므로 주의해야 합니다.

-/* istanbul ignore if */
+/* istanbul ignore if -- @preserve */
if (condition) {

v8의 경우 이로 인해 문제가 발생하지 않습니다. 평소와 같이 Typescript와 함께 v8 ignore 주석을 사용할 수 있습니다.

/* v8 ignore next 3 */
if (condition) {

기타 옵션

커버리지의 모든 구성 옵션을 보려면 커버리지 구성 참조를 참조하십시오.

Vitest UI

Vitest 0.31.0부터 Vitest UI에서 커버리지 보고서를 확인할 수 있습니다.

Vitest UI는 커버리지 보고서가 명시적으로 활성화되어 있고 HTML 커버리지 리포터가 설정되어 있을 때만 커버리지 보고 기능을 활성화합니다. 그렇지 않은 경우에는 사용할 수 없습니다.

• 구성에서 coverage.enabled=true를 활성화하거나 --coverage.enabled=true 플래그로 Vitest를 실행합니다.
• coverage.reporter 목록에 html을 추가합니다. subdir 옵션을 사용하여 커버리지 보고서를 하위 디렉터리에 저장할 수도 있습니다.