故事覆盖率

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

在 Github 上查看

150k

每周下载量

由 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"],
};

配置插件

此插件通过使用围绕 istanbul-lib-instrument 的自定义包装器（如果您的项目使用 Webpack5）或 vite-plugin-istanbul（如果您的项目使用 Vite）来检测您的代码。它提供了一些默认配置，但如果您想添加自己的配置，可以通过在 .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 定义。	`Array<String>`	-
`exclude`	要排除的文件的 glob 模式。它优先于 nyc 配置文件中的 exclude 定义。	`Array<String>`	https://github.com/storybookjs/addon-coverage/blob/main/src/constants.ts 中的 `defaultExclude`
`extension`	受支持扩展名的列表。它优先于 nyc 配置文件中的 extension 定义。	`Array<String>`	`['.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`	有关更多信息，请参见此处	`Array<String>` 或 `string`	`['**']`
`exclude`	有关更多信息，请参见此处	`Array<String>` 或 `string`	list
`extension`	nyc 除了 `.js` 之外还应尝试处理的扩展名列表。	`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`	可选布尔值，强制插件跳过生产环境的检测。查看 Vite 的 ResolvedConfig 中的 isProduction 键。	`布尔值`	`-`
`forceBuildInstrument`	可选布尔值，强制插件在构建模式下添加检测。	`布尔值`	`false`
`nycrcPath`	要使用的特定 nyc 配置文件的路径，而不是自动搜索 nyc 配置文件。此参数只是传递给 @istanbuljs/load-nyc-config。	`字符串`	`-`

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

故障排除

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

--test 标志旨在尽可能快，删除已知会减慢构建速度并且功能测试不需要的插件。其中一个插件是 @storybook/addon-coverage，它与 Storybook 测试运行器结合使用，以收集故事的覆盖率信息。

如果您正在使用 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',
      ],
    },
  },
}