使用 Storybook 测试运行器进行代码覆盖率测试

现在的应用程序比以往任何时候都更加复杂、多状态且个性化。这会产生数千种 UI 排列组合，需要进行测试以查找错误。但是，如何确保您的测试覆盖到 UI 组件的每一种状态？

代码覆盖率扫描您的代码以查找未测试的边界情况。这有助于您编写更全面的测试并增强对 UI 的信心。

我很高兴地告诉您，Storybook 测试运行器现在可以生成覆盖率报告。请继续阅读以了解更多信息

• 🧩 通过插件轻松设置
• ✅ 支持 React、Preact、Vue、Svelte、Web Components 和 HTML
• 🧰 兼容 Babel 和 Vite
• ⚙️ 可根据项目需求定制

使用故事测试组件

在深入了解覆盖率报告之前，我们先回顾一下如何使用 Storybook 测试组件行为。

在为一个组件编写故事时，您也同时捕获了它的测试用例。每个故事描述组件的一种状态。您提供 props 和模拟数据来独立渲染该变体。这作为您的测试的初始状态。

然后，您可以为故事附加一个 play 函数来模拟用户行为（例如，点击和输入）并运行断言。最后，使用 Storybook 测试运行器执行测试。

// AccountForm.stories.ts
import { within, userEvent } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { AccountForm } from './AccountForm';

const meta = { component: AccountForm };
export default meta;

export const VerificationSuccess = {
  args: {
    passwordVerification: true,
  },
  play:  async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
    await userEvent.type(canvas.getByTestId('password1'), 'k32904n£#1kjad');
    await userEvent.type(canvas.getByTestId('password2'), 'k32904n£#1kjad');
    await userEvent.click(canvas.getByTestId('submit'));
    await expect(
      canvas.getByText(
        'Everything is perfect. Your account is ready and we should probably get you started!'
      )
    ).toBeInTheDocument();
  },
};

由 Jest 和 Playwright 提供支持

测试运行器由 Jest 和 Playwright 提供支持，用于验证故事是否无错误渲染以及所有断言是否通过。

使用 Storybook 测试运行器生成代码覆盖率报告

即使您拥有最好的自动化测试，bug 也经常会溜走。这不意味着您的测试套件有缺陷，而是测试不完整。您的代码有多个逻辑分支和条件，因此很容易遗漏其中一些的测试用例。

代码覆盖率让发现未测试的边界情况变得更容易。它让您看到代码的哪些行被测试过。这有助于您编写更相关的测试并提高测试套件的质量。

接下来，我们将通过两个步骤为 Storybook 测试运行器设置代码覆盖率。

1. 对代码进行插桩

对代码进行插桩（instrumenting）允许 Storybook 跟踪您的代码行并找出哪些被测试覆盖。Istanbul 是 JavaScript 生态系统中首选的插桩库。使用 Storybook，您可以使用 @storybook/addon-coverage 为您的项目设置 Istanbul 插桩。

覆盖率插件为 React、Preact、HTML、Web Components、Svelte 和 Vue 提供了开箱即用的支持。它会检测您是否使用 Babel 或 Vite，并相应地配置 Istanbul 插桩。

要使用它，安装 @storybook/addon-coverage

yarn add -D @storybook/addon-coverage

并在您的 .storybook/main.js 文件中注册它

// .storybook/main.js
module.exports = {
  // ...rest of your code here
  addons: [
    "@storybook/addon-coverage",
  ]
};

手动配置 Istanbul

该插件默认配置适用于大多数项目。但是，您可以传入一个 options 对象来根据您的项目需求进行自定义。

您可以控制覆盖率报告中包含或排除哪些文件。或者设置工作目录，这在 monorepo 中工作时特别有用。

一些框架，例如 Angular，不使用 Babel 或 Vite。在这种情况下，您必须手动对代码进行插桩。请查看 Storybook coverage recipes 仓库以获取更多此类示例和方法。

2. 使用覆盖率标志运行测试

现在您已经设置了插桩，可以使用测试运行器了。首先，启动您的 Storybook

yarn storybook

然后，在另一个终端中运行 Storybook 测试运行器，并带有 --coverage 标志

yarn test-storybook --coverage

测试运行器将在 CLI 中报告结果，并生成一个 coverage/storybook/coverage-storybook.json 文件，该文件可供 nyc（Istanbul 命令行接口）使用。

使用其他覆盖率报告器

默认情况下，测试运行器会为您提供文本报告。但是，您可以使用输出的 coverage-storybook.json 文件生成其他类型的报告。

一个例子是 lcov 报告，它提供了更详细、交互式的覆盖率摘要，您可以通过浏览器访问。

要生成 lcov 报告，运行以下命令

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

nyc 是测试运行器的依赖项，因此您的项目中已经有了它。注意，如果您使用 Vue 或 Svelte，您必须配置 nyc 以在报告中包含 .vue 或 .svelte 文件。

它将在 coverage 文件夹中输出 HTML 文件。在浏览器中打开 coverage/storybook/lcov-report/index.html 文件即可查看报告。

此外，您可以使用 Codecov 等工具自动化代码覆盖率报告。Codecov 将自动检测覆盖率文件并随着时间可视化覆盖率进度。

给我们发送反馈

覆盖率插件是实验性的，我们需要您的帮助来使其稳定。请在您的项目上试用它，并报告任何 bug 或改进建议。加入 Storybook Discord 的 #testing 频道或通过 GitHub 贡献代码。

您可以在测试运行器文档中了解更多关于代码覆盖率的信息。

覆盖率跟踪测试套件的健康状况

故事是组件测试的起点。您可以快速隔离一个组件，并将其所有状态和变体捕获为故事。然后使用 Storybook 测试运行器模拟交互并验证组件行为。

代码覆盖率插件为您提供了关于测试套件的宝贵见解。它跟踪哪些组件正在被测试，并提醒您可能遗漏的边界情况。