88,244
文档
Storybook 文档

测试覆盖率

测试覆盖率是指衡量现有测试是否完全覆盖代码的做法。它标记出代码中被测试和未被测试的条件、逻辑分支、函数和变量。

覆盖率测试会根据一组行业接受的最佳实践来检查经过插桩的代码。它们充当了 QA 的最后一道防线，以提高测试套件的质量。

每个项目的覆盖率报告都会有所不同，但需要注意的要点是：

  1. 总体行/分支覆盖率，作为高级健康检查。
  2. 未覆盖的特定行/分支，这是潜在的测试差距。

当您使用 Vitest 插件 运行组件测试时，它可以生成覆盖率报告。结果会汇总在测试小部件中，显示被测试的 stories 所覆盖的语句百分比。

Test widget with coverage summary

如果您无法在项目中将 Vitest 插件与覆盖率结合使用，您仍然可以使用 test-runner 生成代码覆盖率。请遵循 test-runner 文档 中的说明，在您的项目中设置 test-runner 和代码覆盖率。

设置

覆盖率包含在 Vitest 插件 中，启用后，在运行项目组件测试时将计算覆盖率。要启用覆盖率，请勾选测试小部件中的覆盖率复选框。

Screenshot of testing widget, expanded, showing coverage toggle

在计算覆盖率之前，您可能需要安装与您的 覆盖率提供商 相对应的支持包。

# For v8
npm install --save-dev @vitest/coverage-v8
 
# For istanbul
npm install --save-dev @vitest/coverage-istanbul

用法

由于覆盖率已内置到 Vitest 插件中，因此您可以在运行测试的任何地方使用它。

Storybook UI

当您在 Storybook UI 中启用覆盖率时，在运行测试后，覆盖率报告将生成并汇总在测试小部件中。您可以看到被测试的 stories 所覆盖的语句百分比，以及覆盖率是否满足 水印。

此外，完整的覆盖率报告将在您正在运行的 Storybook 的 /coverage/index.html 路由下提供。

Two browser windows. The frontmost one shows the interactive coverage report generated by the Vitest addon. The background one shows the Storybook sidebar with the coverage summary visible in the testing widget.

该报告是交互式的。您可以点击进入组件以查看其源代码，并了解代码的哪些部分被测试覆盖或未被覆盖。

Interactive coverage report generated by the Vitest addon, showing the Calendar component's reported source

重要的是要理解，Storybook UI 中报告的覆盖率有三个主要限制：

  1. 覆盖率是使用您编写的 stories 计算的，而不是整个代码库。换句话说，它不包括任何其他 Vitest 测试。
  2. 覆盖率只能为项目中的所有 stories 计算，而不能为单个 story 或一组 stories 计算。
  3. 在 watch 模式激活时，不会计算覆盖率。当启用覆盖率时，启用 watch 模式将禁用覆盖率。

CLI

与 Storybook Test 的其他部分一样，覆盖率是建立在 Vitest 之上的。这意味着您可以使用 Vitest CLI 来生成覆盖率报告。

假设您使用类似以下的包脚本运行测试：

package.json
{
  "scripts": {
    "test-storybook": "vitest --project=storybook"
  }
}

然后您可以通过以下方式生成覆盖率报告：

npm run test-storybook -- --coverage

Generated coverage report in terminal

覆盖率报告将保存在您项目中的 配置的覆盖率报告目录（默认为 ./coverage）中。

上面的命令将仅计算您编写的 stories 的覆盖率，而不是整个代码库。

由于覆盖率在考虑项目中的所有测试时最准确，您还可以运行以下命令来计算项目中的所有测试的覆盖率：

npx vitest --coverage

编辑器扩展

通过 Vitest 的 IDE 集成 也可以使用覆盖率。您可以在编辑器中直接计算和显示覆盖率结果。

Screenshot of test coverage in VSCode

请注意，此覆盖率将包括您项目中的所有测试，而不仅仅是您编写的 stories。

CI

要在 CI 管道中生成覆盖率报告，您可以使用 CLI。

例如，这是一个简化的 GitHub Actions 工作流，它运行您的测试并生成覆盖率报告：

.github/workflows/test-storybook.yml
name: Storybook Tests
on: push
jobs:
  test:
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - name: Install dependencies
        run: yarn
        # 👇 This will run all Vitest tests, including Storybook tests
      - name: Run tests
        run: yarn test --coverage

为什么我们要运行所有测试（yarn test），而不是只运行 Storybook 测试（yarn test-storybook）？因为覆盖率报告在考虑项目中的所有测试时最准确，而不仅仅是您编写的 stories。

查看 Storybook 特定的覆盖率 可能很有帮助，但在 CI 输出中，您希望看到项目的综合覆盖率。

有关在 CI 中进行测试的更多信息，请参阅 专用指南。

配置

覆盖率提供商

您可以通过在 Vitest 配置中设置 coverage.provider 选项来选择用于计算覆盖率的提供商，例如 v8（默认）或 Istanbul。

vitest.config.ts
import { defineConfig } from 'vitest/config';
 
export default defineConfig({
  // ...
  test: {
    // ...
    coverage: {
      // ...
      provider: 'istanbul', // 'v8' is the default
    },
  },
});

水印

这两个覆盖率提供商都支持 水印，它们是覆盖率的阈值。低水印是测试通过所需的最低覆盖率，高水印是认为良好所需的最低覆盖率。介于低水印和高水印之间的覆盖率百分比将被视为可接受但非理想。

在测试小部件中，覆盖率摘要将显示被测试的 stories 所覆盖的语句百分比，以及覆盖率是否满足水印。低于低水印的图标将是红色的，介于低水印和高水印之间将是橙色的，高于高水印将是绿色的。

要配置水印，您可以调整 Vitest 配置：

vitest.config.ts
import { defineConfig } from 'vitest/config';
 
export default defineConfig({
  // ...
  test: {
    // ...
    coverage: {
      // ...
      watermarks: {
        // These are the default values
        statements: [50, 80],
      },
    },
  },
});

其他配置

您可以在 Vitest 文档 中找到更多关于覆盖率的配置选项。

在 Storybook UI 中计算覆盖率时，以下选项始终被忽略：

  • enabled
  • clean
  • cleanOnRerun
  • reportOnFailure
  • reporter
  • reportsDirectory

更多测试资源

此页面有用吗？
✍️ 在 GitHub 上编辑