Story 覆蓋率

為您的 Story 產生程式碼覆蓋率報告

在 Github 上檢視

15萬

每週下載次數

由 Storybook 製作

Storybook 擴充功能覆蓋率

支援 Storybook 和 Storybook 測試執行器中程式碼覆蓋率的工具。它支援使用 Webpack5 或 Vite 的 Storybook 專案。

安裝

透過新增 @storybook/addon-coverage 相依性來安裝此擴充功能

yarn add -D @storybook/addon-coverage

並在您的 .storybook/main.js 中註冊它

export default {
  addons: ["@storybook/addon-coverage"],
};

設定擴充功能

如果您的專案使用 Webpack5，此擴充功能會使用 istanbul-lib-instrument 的自訂包裝器來檢測您的程式碼，如果您的專案使用 Vite，則會使用 vite-plugin-istanbul。它提供了一些預設設定，但如果您想新增自己的設定，您可以在 .storybook/main.js 中設定選項

export default {
  addons: [
    {
      name: "@storybook/addon-coverage",
      options: {
        istanbul: {
          include: ["**/stories/**"],
        },
      },
    },
  ],
};

如果您的專案使用 Webpack5，可用的選項如下

選項名稱	描述	類型	預設值
`cwd`	設定工作目錄	`字串`	`process.cwd()`
`nycrcPath`	要使用的特定 nyc 配置的路徑，而不是自動搜尋 nycconfig。	`字串`	-
`include`	包含檔案的 Glob 模式。它優先於您的 nyc 配置中的 include 定義	`陣列<字串>`	-
`exclude`	排除檔案的 Glob 模式。它優先於您的 nyc 配置中的 exclude 定義	`陣列<字串>`	`defaultExclude` 在 https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts 中
`extension`	支援的副檔名清單。它優先於您的 nyc 配置中的副檔名定義	`陣列<字串>`	`['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte']`
`coverageVariable`	Istanbul 將用來儲存覆蓋率結果的全域變數名稱。	`字串`	-
`preserveComments`	表示在檢測過程中是否應保留程式碼中的註解。	`布林值`	`true`
`compact`	控制檢測後的程式碼輸出是否緊湊。當設定為 `false` 時，有助於偵錯。	`布林值`	`false`
`esModules`	決定要檢測的程式碼是否使用 ES 模組語法。	`布林值`	`true`
`autoWrap`	當設定為 `true` 時，將程式碼包裝在函式中以啟用最上層的 return 語句。	`布林值`	`true`
`produceSourceMap`	如果為 `true`，則指示 Istanbul 為檢測後的程式碼產生原始碼地圖。	`布林值`	`true`
`sourceMapUrlCallback`	當產生原始碼地圖時，會使用檔案名稱和原始碼地圖 URL 呼叫的回呼函式。	`函式`	-
`debug`	啟用偵錯模式，在檢測過程中提供額外的記錄資訊。	`布林值`	-

注意：如果您正在使用 TypeScript，您可以像這樣匯入選項的類型
import type { AddonOptionsWebpack } from "@storybook/addon-coverage";

如果您的專案使用 Vite，可用的選項如下

選項名稱	描述	類型	預設值
`cwd`	設定工作目錄	`字串`	`process.cwd()`
`include`	有關更多資訊，請參閱此處	`陣列<字串>` 或 `字串`	`['**']`
`exclude`	有關更多資訊，請參閱此處	`陣列<字串>` 或 `字串`	list
`extension`	除了 `.js` 之外，nyc 應嘗試處理的副檔名清單	`陣列<字串>` 或 `字串`	`['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte']`
`requireEnv`	可選布林值，要求環境變數（預設為 VITE_COVERAGE）等於 true 才能檢測程式碼。否則，即使未設定環境變數，也會進行檢測。但是，如果未設定 requireEnv，則當環境變數等於 false 時，檢測將會停止。	`布林值`	`-`
`cypress`	可選布林值，將環境變數變更為 CYPRESS_COVERAGE 而不是 VITE_COVERAGE。為了方便使用 `@cypress/code-coverage` 覆蓋率	`布林值`	`-`
`checkProd`	可選布林值，強制外掛程式跳過生產環境的檢測。查看 Vite ResolvedConfig 中的 isProduction 金鑰。	`布林值`	`-`
`forceBuildInstrument`	可選布林值，強制外掛程式在建置模式中新增檢測。	`布林值`	`false`
`nycrcPath`	要使用的特定 nyc 配置的路徑，而不是自動搜尋 nycconfig。此參數只是傳遞給 @istanbuljs/load-nyc-config。	`字串`	`-`

注意：如果您正在使用 TypeScript，您可以像這樣匯入選項的類型
import type { AddonOptionsVite } from "@storybook/addon-coverage";

疑難排解

覆蓋率擴充功能不支援最佳化建置

--test 標記旨在盡可能快，移除已知會減慢建置速度且功能測試不需要的擴充功能。其中一個擴充功能是 @storybook/addon-coverage，它與 Storybook 測試執行器結合使用，以收集您 Story 的覆蓋率資訊。

如果您正在使用 addon-coverage 且針對您已建置的 Storybook 執行測試執行器，則 --test 標記會移除覆蓋率資訊。若要設定 --test 建置以保留覆蓋率資訊（以稍慢的建置速度為代價），請更新您的 Storybook 設定檔（即 .storybook/main.js|ts）並包含 disabledAddons 選項。

// main.js

export default {
  // Your Storybook configuration goes here
  build: {
    test: {
      disabledAddons: [
        '@storybook/addon-docs',
        '@storybook/addon-essentials/docs',
      ],
    },
  },
}