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

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

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

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

• 🧩 通过 addon 轻松设置
• ✅ 支持 React、Preact、Vue、Svelte、Web components 和 HTML
• 🧰 兼容 Babel 和 Vite
• ⚙️ 可根据您的项目需求进行自定义

使用 story 测试组件

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

在为组件编写 story 时，您还可以捕获其测试用例。每个 story 描述一个组件状态。您提供 props 和模拟数据以隔离呈现该变体。这充当您测试的初始状态。

然后，您可以将play function附加到 story 以模拟用户行为（例如，单击和输入）并运行断言。最后，使用 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 驱动，以验证 story 是否在没有错误的情况下呈现以及所有断言是否通过。

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

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

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

让我们继续并分两步为 Storybook 测试运行器设置代码覆盖率。

1. 检测代码

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

coverage addon 为 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

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

您可以控制要在覆盖率报告中包含或排除哪些文件。或者设置工作目录，这在单体仓库中工作时尤其有用。

某些框架（例如 Angular）不使用 Babel 或 Vite。在这种情况下，您必须手动检测您的代码。查看 Storybook coverage recipes 存储库，了解更多此类配方和示例。

2. 使用 coverage 标志运行测试

现在您已经设置了检测，您就可以使用测试运行器了。首先，启动您的 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 文件包含在报告中。

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

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

向我们发送反馈

coverage addon 尚处于实验阶段，我们需要您的帮助来使其稳定。请在您的项目上试用它，并报告任何错误或改进建议。加入我们的 Storybook Discord #testing 频道，或通过 GitHub 贡献。

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

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

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

code coverage addon 为您提供有关测试套件的宝贵见解。它可以跟踪正在测试哪些组件，并提醒您可能遗漏的边缘情况。