测试覆盖率

测试覆盖率是一种衡量现有测试是否完全覆盖代码的实践。它标记了代码中哪些条件、逻辑分支、函数和变量被测试到，哪些没有被测试到。

覆盖率测试根据一组行业公认的最佳实践来检查已插桩的代码。它们作为质量保证的最后一道防线，旨在提高测试套件的质量。

每个项目的覆盖率报告看起来都会不同，但需要注意的重要事项是

1. 整体行/分支覆盖率，这作为一种高层级的健康检查。
2. 未覆盖到的特定行/分支，这些是潜在的测试盲点。

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

设置

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

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

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

用法

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

Storybook UI

在 Storybook UI 中启用覆盖率后，运行测试后将生成并汇总覆盖率报告到测试小部件中。您可以查看已测试故事覆盖的语句百分比，以及覆盖率是否达到水线。

此外，完整的覆盖率报告将通过运行中的 Storybook 的 /coverage/index.html 路由提供。

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

命令行 (CLI)

与 Storybook 测试的其余部分一样，覆盖率构建在 Vitest 之上。这意味着您可以使用Vitest 命令行工具生成覆盖率报告。

假设您使用以下软件包脚本运行测试

{
  "scripts": {
    "test-storybook": "vitest --project=storybook"
  }
}

然后您可以使用以下命令生成覆盖率报告

npm run test-storybook -- --coverage

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

npx vitest --coverage

编辑器扩展

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

持续集成 (CI)

要在持续集成流水线中生成覆盖率报告，您可以使用命令行工具。

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

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

有关持续集成中测试的更多信息，请参阅专门指南。

配置

覆盖率提供者

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

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

水线

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

在测试小部件中，覆盖率汇总将显示您的已测试故事覆盖的语句百分比，以及覆盖率是否达到水线。低于低水线时，图标将显示为红色；介于低水线和高水线之间时，显示为橙色；高于高水线时，显示为绿色。

要配置水线，您可以调整 Vitest 配置

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

更多测试资源

• 用于在 Storybook 中运行测试的Vitest 插件
• 用于用户行为模拟的交互测试
• 用于可访问性的可访问性测试
• 用于外观的可视化测试
• 用于渲染错误和警告的快照测试
• 用于在 CI/CD 流水线中运行测试的持续集成 (CI)
• 用于模拟真实用户场景的端到端测试
• 用于功能的单元测试
• 用于自动化测试执行的测试运行器