84,593
文件
Storybook 文件

測試覆蓋率

觀看影片教學

測試覆蓋率是一種衡量現有測試是否完全覆蓋您程式碼的實務。這表示會找出目前未測試的區域，例如：條件、邏輯分支、函數和變數。

覆蓋率測試會針對一組業界認可的最佳實務來檢查已檢測的程式碼。它們可作為最後一道品質保證防線，以提高您的測試套件的品質。

使用覆蓋率附加元件進行程式碼檢測

Storybook 提供官方的測試覆蓋率附加元件。由 Istanbul 提供技術支援，可為 JavaScript 生態系統中最常用的框架和建置器提供開箱即用的程式碼檢測。

設定覆蓋率附加元件

覆蓋率附加元件的設計可與現代測試工具（例如 Playwright）搭配使用，它會自動檢測您的程式碼並產生程式碼覆蓋率資料。為了獲得最佳體驗，我們建議您搭配使用測試執行器和覆蓋率附加元件來執行測試。

執行下列命令以安裝附加元件。

npm install @storybook/addon-coverage --save-dev

更新您的 Storybook 設定 (在 .storybook/main.js|ts 中)，以包含覆蓋率附加元件。

.storybook/main.ts
// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  stories: [],
  addons: [
    // Other Storybook addons
    '@storybook/addon-coverage', //👈 Registers the addon
  ],
};
 
export default config;

使用以下命令啟動您的 Storybook

npm run storybook

最後，開啟新的終端機視窗，並使用以下命令執行測試執行器

npm run test-storybook -- --coverage

Coverage test output

設定

預設情況下，@storybook/addon-coverage 提供對 Storybook 的零設定支援，並透過 istanbul-lib-instrument 為 Webpack 或透過 vite-plugin-istanbul 為 Vite 來檢測您的程式碼。不過，您可以擴充您的 Storybook 設定檔 (即 .storybook/main.js|ts) 並為附加元件提供其他選項。以下列出可用的選項，依建置器和如何使用它們的範例進行分類。

.storybook/main.ts
// For Vite support add the following import
// import type { AddonOptionsVite } from '@storybook/addon-coverage';
 
import type { AddonOptionsWebpack } from '@storybook/addon-coverage';
 
// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';
 
const coverageConfig: AddonOptionsWebpack = {
  istanbul: {
    include: ['**/stories/**'],
    exclude: ['**/exampleDirectory/**'],
  },
};
 
const config: StorybookConfig = {
  stories: [],
  addons: [
    // Other Storybook addons
    {
      name: '@storybook/addon-coverage',
      options: coverageConfig,
    },
  ],
};
 
export default config;
Vite 選項描述類型
checkProd設定外掛程式以略過生產環境中的檢測
options: { istanbul: { checkProd: true,}}		布林值
cwd設定覆蓋率測試的工作目錄。
預設為 process.cwd()
options: { istanbul: { cwd: process.cwd(),}}		字串
cypress將 VITE_COVERAGE 環境變數取代為 CYPRESS_COVERAGE。
需要 Cypress 的程式碼覆蓋率
options: { istanbul: { cypress: true,}}		布林值
exclude使用所提供的要從覆蓋率中排除的檔案或目錄清單，覆寫預設排除清單
options: { istanbul: { exclude: ['**/stories/**'],}}		Array<String> 或 string
extension使用所提供的要包含在覆蓋率中的檔案擴充名清單，擴充預設擴充清單
options: { istanbul: { extension: ['.js', '.cjs', '.mjs'],}}		Array<String> 或 string
forceBuildInstrument設定外掛程式以在建置模式中新增檢測
options: { istanbul: { forceBuildInstrument: true,}}		布林值
include選取要收集覆蓋率的檔案
options: { istanbul: { include: ['**/stories/**'],}}		Array<String> 或 string
nycrcPath定義現有 nyc 設定檔的相對路徑
options: { istanbul: { nycrcPath: '../nyc.config.js',}}		字串
requireEnv透過授與對 env 變數的存取權，覆寫 VITE_COVERAGE 環境變數的值
options: { istanbul: { requireEnv: true,}}		布林值
Webpack 5 選項描述類型
autoWrap透過將程式碼包裝在函數中，提供對最上層 return 陳述式的支援
options: { istanbul: { autoWrap: true,}}		布林值
compact濃縮檢測程式碼的輸出。適用於偵錯
options: { istanbul: { compact: false,}}		布林值
coverageVariable定義 Istanbul 將用來儲存覆蓋率結果的全域變數名稱
options: { istanbul: { coverageVariable: '__coverage__',}}		字串
cwd設定覆蓋率測試的工作目錄。
預設為 process.cwd()
options: { istanbul: { cwd: process.cwd(),}}		字串
debug啟用偵錯模式以取得檢測過程中額外的記錄資訊
options: { istanbul: { debug: true,}}		布林值
esModules啟用對 ES 模組語法的支援
options: { istanbul: { esModules: true,}}		布林值
exclude使用所提供的要從覆蓋率中排除的檔案或目錄清單，覆寫預設排除清單
options: { istanbul: { exclude: ['**/stories/**'],}}		Array<String> 或 string
extension使用所提供的要包含在覆蓋率中的檔案擴充名清單，擴充預設擴充清單
options: { istanbul: { extension: ['.js', '.cjs', '.mjs'],}}		Array<String> 或 string
include選取要收集覆蓋率的檔案
options: { istanbul: { include: ['**/stories/**'],}}		Array<String> 或 string
nycrcPath定義現有 nyc 設定檔的相對路徑
options: { istanbul: { nycrcPath: '../nyc.config.js',}}		字串
preserveComments在檢測程式碼中包含註解
options: { istanbul: { preserveComments: true,}}		布林值
produceSourceMap設定 Instanbul 為檢測的程式碼產生來源對應
options: { istanbul: { produceSourceMap: true,}}		布林值
sourceMapUrlCallback定義一個回呼函式，當產生原始碼地圖時，會使用檔名和原始碼地圖 URL 進行呼叫。
選項：{ istanbul: { sourceMapUrlCallback: (filename, url) => {},}}		函式

其他程式碼覆蓋率報告工具有什麼呢？

開箱即用，程式碼覆蓋率測試可與 Storybook 的測試執行器和 @storybook/addon-coverage 無縫協作。不過，這並不代表您不能使用其他的報告工具（例如，Codecov）。例如，如果您使用的是 LCOV，您可以使用產生的輸出（在 coverage/storybook/coverage-storybook.json 中），並使用它來建立您自己的報告。

npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook

疑難排解

在其他框架中執行測試覆蓋率

如果您打算在具有特殊檔案的框架（例如 Vue 3 或 Svelte）中執行覆蓋率測試，您需要調整設定並啟用所需的檔案擴展名。例如，如果您使用的是 Vue，則需要在您的 nyc 設定檔（即 .nycrc.json 或 nyc.config.js）中新增以下內容：

.nyc.config.js
export default {
  // Other configuration options
  extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'],
};

覆蓋率附加元件不支援最佳化建置

如果您使用 --test 標誌產生針對效能最佳化的生產版本，並且您正在使用覆蓋率附加元件針對您的 Storybook 執行測試，則您可能會遇到覆蓋率附加元件無法檢測您的程式碼的情況。這是由於該標誌的工作方式，它會移除對效能有影響的附加元件（例如，Docs、覆蓋率附加元件）。若要解決這個問題，您需要調整您的 Storybook 設定檔（即 .storybook/main.js|ts），並包含 disabledAddons 選項，以允許附加元件以犧牲較慢的建置速度為代價來執行測試。

.storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-coverage',
  ],
  build: {
    test: {
      disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'],
    },
  },
};
 
export default config;

覆蓋率附加元件不支援檢測程式碼

由於 覆蓋率附加元件 是基於 Webpack5 加載器和 Vite 插件進行程式碼檢測，因此不依賴這些函式庫的框架（例如，使用 Webpack 設定的 Angular）將需要額外的設定才能啟用程式碼檢測。在這種情況下，您可以參考以下 儲存庫 以取得更多資訊。

了解其他 UI 測試

此頁面是否對您有幫助？
✍️ 在 Github 上編輯