覆蓋率

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

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

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

bash

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

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

覆蓋率設定

要啟用覆蓋率測試，您可以在 CLI 中傳遞 --coverage 標記。預設情況下，將使用 reporter ['text', 'html', 'clover', 'json']。

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

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

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

diff

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

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

/* c8 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.reporters 列表中；您還可以啟用 subdir 選項，以將覆蓋率報告放入子目錄中

覆蓋率 ​

覆蓋率工具 ​

覆蓋率設定 ​

自定義覆蓋率提供者 ​

更改預設覆蓋率資料夾位置 ​

忽略程式碼 ​

其他選項 ​

Vitest UI ​

覆蓋率