覆蓋率

Vitest 透過 v8 支援原生程式碼覆蓋率，並透過 istanbul 支援儀器化程式碼覆蓋率。

覆蓋率提供者 (Coverage Providers)

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', // or 'v8'
    },
  },
});

當您啟動 Vitest 程序時，它會自動提示您安裝相應的支援套件。

或者，如果您希望手動安裝它們：

# For v8
npm i -D @vitest/coverage-v8

# For 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 實現為預設導出：

// 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)。 被視為 legal comments 的註釋會被保留。

對於 istanbul 提供者，您可以在忽略提示中包含 @preserve 關鍵字。 請注意，這些忽略提示現在也可能包含在最終產品建置中。

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

對於 v8，這不會造成問題。您可以像往常一樣將 v8 ignore 註釋與 Typescript 一起使用：

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

其他選項

要查看所有可配置的覆蓋率選項，請參閱 覆蓋率配置參考。

Vitest UI

自 Vitest 0.31.0 起，您可以在 Vitest UI 中查看您的覆蓋率報告。

當明確啟用覆蓋率報告，且存在 html 覆蓋率 reporter 時，Vitest UI 將啟用覆蓋率報告，否則將不可用：

• 在您的配置中啟用 coverage.enabled=true，或使用 --coverage.enabled=true 標記運行 Vitest
• 將 html 新增至 coverage.reporter 列表中；您還可以啟用 subdir 選項，以將覆蓋率報告放入子目錄中