使用 Storybook 9 进行前端测试覆盖

前端代码覆盖率一直令人沮丧。对于后端代码，你可以为每个函数编写单元测试，然后就大功告成了。但前端 UI 是动态的、有状态的，并且依赖于渲染上下文——比如浏览器、设备和用户偏好。这使得跟踪前端的代码覆盖率变得困难。传统的工具无法跟上现代应用程序中 UI 状态的爆炸式增长。

Storybook 9 聚焦前端代码覆盖率。 它会跟踪你的组件代码有多少被 story 所覆盖，从而让你能够精细地了解哪些需要测试。本文将展示如何通过 Storybook 将代码覆盖率集成到你的开发工作流程中。

为什么前端代码覆盖率很重要

前端测试的目的是验证 UI 的运行方式与用户体验一致。第一步是确认每个相关的组件状态都在测试中得到体现。

代码覆盖率会告诉你哪些状态在测试中缺失。它会扫描底层组件代码，突出显示哪些分支和条件被测试所覆盖——哪些没有。Storybook 会对代码覆盖率分析进行适配，使其能够直接与你的 *.stories 文件配合使用。

Story 免费提供广泛的覆盖率

当你编写 story 时，你会自然而然地记录 UI 的关键状态。在 Storybook 9 中，每个 story 都可以自动在三个维度上进行测试：

• 交互 – 使用 Vitest 模拟真实的事件。
• 可访问性 – 使用 axe-core 审计 WCAG 违规情况。
• 视觉 – 使用 Chromatic 检测像素级的回归。

通过 Storybook 的代码覆盖率，你可以看到有多少组件代码被 story 所测试。这创造了一个紧密的反馈循环：

前端代码覆盖率工作流程

Storybook 9 包含了一个新的代码覆盖率工作流程，让你可以在开发环境中轻松测试、衡量和改进你的组件覆盖率。

1. 运行你的测试

只需点击一次或执行一个命令即可运行所有测试。Storybook 会针对每个 story 执行交互测试（Vitest）、可访问性检查（axe）和视觉测试（Chromatic）。

你可以直接在 Storybook 中使用内置的测试小部件运行测试，也可以在 CI 中无头模式下运行，完全无需启动 Storybook UI。

2. 查看未覆盖的内容

代码覆盖率报告会突出显示：

• 没有 story 的组件。
• 未被任何 story 覆盖的代码行。
• 未被测试过的分支和 prop 组合。

它由 Vitest 提供支持，并与 Istanbul 等行业工具完全兼容，因此你可以将前端指标包含在与后端和服务层覆盖率相同的报告中。

深入查看此示例中的 Card 组件，我们可以看到 CardAction 和 CardFooter 子组件尚未被测试。

3. 填补空白

Storybook 包含用于快速提高覆盖率的工具。

对于没有 story 的组件：

点击“添加 story”按钮，用默认参数生成一个新的 story 文件，或者手动编写一个 *.stories.ts 文件。

对于部分覆盖的组件：

使用 Controls 面板调整 prop，然后点击“创建新的 story”来捕获该状态作为一个新的 story。或者手动编写一个 story 来定位某个分支或 prop 配置。

4. 重新运行测试套件进行确认

添加 story 后，重新运行你的测试。代码覆盖率报告会立即更新，显示哪些代码行现在已被覆盖。

可以看到，我们为 CardAction 和 CardFooter 添加的新 story 使我们获得了完全的覆盖率。

Storybook 在你的前端测试策略中的定位

每种测试类型都解决了独特的问题。要实现全面的测试策略，两者缺一不可。

• 端到端测试对于验证关键用户流程——登录、结账、入门——至关重要。但它们编写和维护成本高昂，这限制了有多少应用程序值得用它们来测试。
• Storybook 测试接力 E2E 的不足，通过广泛覆盖组件的全部表面积——props、主题、边缘情况、视口等等。所有这些都没有不稳定或维护开销。

利用 AI 加速代码覆盖率

驱动 Cursor、ChatGPT、Claude 和 Windsurf 的基础模型在数千个 story 上进行了训练。这使得它们可以直接从你的组件代码生成 story。

Storybook 的代码覆盖率工具帮助你辨别哪些需要覆盖。AI 可以帮助你为未被测试的 UI 添加必要的 story。虽然它并不完美，但它是一个坚实的基础，你可以在之后对其进行改进。

开始上手

Storybook 9 为你提供了一个集中的工作流程，用于编写、测试和跟踪 UI 代码覆盖率。它有助于确保即使是最晦涩的边缘情况也能按预期运行。并且它与你现有的代码覆盖率工具集成，让整个团队都能了解哪些内容已被测试。

你已经在使用 story。Storybook 9 显示了它们覆盖了多少前端代码。在新项目中试用一下吧！

npm create storybook@latest

如果您已经有一个现有的 Storybook 项目，请先将其升级到 Storybook 9。使用我们的自动化迁移向导来帮助您完成整个过程

npx storybook@latest upgrade

我们还创建了一个 迁移指南 来帮助填补空白。

了解更多

如果你想了解更多信息或有任何疑问，我们下周将举办一个关于 Storybook 中代码覆盖率的在线直播活动。

🗓️ 6月26日 | 🕗 ET时间下午12:00 / CET时间下午18:00
📍 Zoom 直播网络研讨会
🔗 立即注册 →