Story 覆盖率

为您的 stories 生成代码覆盖率报告

在 Github 上查看

249k

每周下载量

由 Storybook 制作

Storybook 覆盖率插件

支持 Storybook 和 Storybook test runner 中的代码覆盖率工具。它支持使用 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 配置的路径，而不是自动搜索 nyc 配置。	`字符串`	-
`include`	用于包含文件的 Glob 模式。它优先于您的 nyc 配置中的 include 定义	`字符串数组`	-
`exclude`	用于排除文件的 Glob 模式。它优先于您的 nyc 配置中的 exclude 定义	`字符串数组`	https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts 中的 `defaultExclude`
`extension`	支持的扩展名列表。它优先于您的 nyc 配置中的 extension 定义	`字符串数组`	`['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]`
`coverageVariable`	Istanbul 将用于存储覆盖率结果的全局变量名称。	`字符串`	-
`preserveComments`	指示在代码检测过程中是否应保留代码中的注释。	`布尔值`	`true`
`compact`	控制检测后的代码输出是否紧凑。设置为 `false` 时对于调试很有用。	`布尔值`	`false`
`esModules`	确定要检测的代码是否使用 ES Module 语法。	`布尔值`	`true`
`autoWrap`	设置为 `true` 时，将程序代码包装在一个函数中，以启用顶层 return 语句。	`布尔值`	`true`
`produceSourceMap`	如果为 `true`，指示 Istanbul 为检测后的代码生成 source map。	`布尔值`	`true`
`sourceMapUrlCallback`	生成 source map 时，会使用文件名和 source map URL 调用的回调函数。	`函数`	-
`debug`	启用调试模式，在代码检测过程中提供额外的日志信息。	`布尔值`	-

注意：如果您使用 TypeScript，可以像这样导入选项的类型
import type { AddonOptionsWebpack } from "@storybook/addon-coverage";

如果您的项目使用 Vite，可用选项如下

选项名称	描述	类型	默认值
`cwd`	设置工作目录	`字符串`	`process.cwd()`
`include`	更多信息请参见此处	`Array<String>` 或 `string`	`['**']`
`exclude`	更多信息请参见此处	`Array<String>` 或 `string`	list
`extension`	除了 `.js` 之外，nyc 应尝试处理的扩展名列表	`Array<String>` 或 `string`	`['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte]`
`requireEnv`	可选的布尔值，要求环境变量（默认为 VITE_COVERAGE）等于 true 才能检测代码。否则，即使未设置环境变量，也会进行检测。但是，如果未设置 requireEnv，则当环境变量等于 false 时，检测将停止。	`布尔值`	`-`
`cypress`	可选的布尔值，将环境变量更改为 CYPRESS_COVERAGE 而不是 VITE_COVERAGE。为了方便与 `@cypress/code-coverage` 覆盖率一起使用	`布尔值`	`-`
`checkProd`	可选的布尔值，强制插件跳过生产环境的代码检测。查看 ResolvedConfig 中 Vite 的 isProduction 键。	`布尔值`	`-`
`forceBuildInstrument`	可选的布尔值，强制插件在构建模式下添加代码检测。	`布尔值`	`false`
`nycrcPath`	要使用的特定 nyc 配置的路径，而不是自动搜索 nyc 配置。此参数仅传递给 @istanbuljs/load-nyc-config。	`字符串`	`-`

注意：如果您使用 TypeScript，可以像这样导入选项的类型
import type { AddonOptionsVite } from "@storybook/addon-coverage";

故障排除

覆盖率插件不支持优化构建

--test 标志旨在尽可能快，会移除已知会减慢构建速度且功能测试不需要的插件。其中一个插件是 @storybook/addon-coverage，它与 Storybook Test runner 一起用于收集您的 stories 的覆盖率信息。

如果您正在使用 addon-coverage 并针对您的 构建的 Storybook 运行 test runner，则 --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',
      ],
    },
  },
}