使用 Storybook 和 Vitest 进行组件测试

您已经在使用 Storybook 来构建 UI 状态。通过 Storybook 9，我们使用最新一代的工具改进了测试工作流。我们与 Vitest 合作，后者提供了最快的测试运行器，以构建终极的组件测试工作流。它包括：

👆 交互测试
♿️ 可访问性测试
🖼️ 视觉测试
🛡️ 覆盖率报告
🚥 自动运行测试的测试小部件

为什么需要组件测试？

组件测试在单元测试的速度和端到端 (E2E) 测试的浏览器内保真度之间找到了最佳平衡点，并且没有任何缺点。

组件测试可以以最少的维护成本扩展到数千个 UI 状态。单元测试验证逻辑；E2E 测试最适合几个关键流程。Storybook Test 覆盖了中间部分：您的组件。

Storybook 非常适合组件测试，因为故事（stories）已经表达了每个组件的变体，因此为这些变体添加测试非常容易。

三种组件测试类型

在前端开发中，有三个核心维度需要测试。Storybook 在本地开发和 CI 中都开箱即用地支持这些测试。

1. 它能正常工作吗？交互测试
2. 每个人都能使用它吗？可访问性测试
3. 它看起来正确吗？视觉测试

交互测试

交互测试模拟用户行为并断言组件是否按预期运行。Storybook 多年来通过 `play` 函数支持了这种测试类型，但您只能在导航到故事时运行这些测试。现在，您只需单击一下即可运行所有故事中的所有交互测试，并借助 Vitest 在侧边栏中报告测试状态。

单击侧边栏中的交互测试失败会带您进入“交互”面板。它允许您在 play 函数中向前和向后逐步执行，并在每一步检查故事。

可访问性测试

可访问性测试会扫描渲染的 DOM，以验证它是否符合 Web 内容可访问性指南 (WCAG)。这些检查由行业标准的工具 `axe-core` 实现。

9.0 引入了重新设计的 A11y 面板、改进的违规高亮显示以及深度链接，以简化调试。

该面板经过全面改造，按类型对违规进行分组，并允许您通过在故事中高亮显示每个失败并提供有关如何修复它的有用信息来调试每个失败。

我们的姊妹工具 Chromatic 刚刚在云端推出了可访问性回归测试 (ART)。大多数团队都有现有的可访问性债务，无法立即修复所有违规。ART 会为现有的违规设置基线，并阻止引入新的 WCAG 错误。这样，您可以按照自己的节奏继续发布并优先处理债务。

视觉测试

视觉测试会比较代码更改之前和之后 UI 的外观，以防止视觉错误。视觉测试最棒的地方在于，您无需编写任何新的测试代码。

Storybook 视觉测试使用 Chromatic，这是由 Storybook 维护者开发的云服务，它提供了跨数千个测试的并行化和一致性。

当它检测到视觉差异时，它会显示为侧边栏中的警告。单击该警告会带您进入“视觉测试”面板，该面板显示了前后状态的图像差异。

测试小部件：一键测试所有内容

测试小部件是 Storybook Test 的核心。单击一次即可运行所有故事中的所有测试—或者配置要运行的测试类型。启用监视模式后，在保存时即可立即仅重新运行受影响的测试。

然后，您可以过滤侧边栏，使其仅显示带有警告或错误的那些故事。每种测试类型都有自己的调试面板。由于 Storybook 在您自己的浏览器中运行，您还可以使用浏览器开发者工具进行调试。

批量测试

批量测试单个故事、组件或文件夹以加快反馈速度。非常适合拥有数千个故事的大型 Storybook。

测试覆盖率

代码覆盖率将组件代码与故事代码进行比较，以显示哪些代码行和分支由测试执行。覆盖率内置于 Storybook 中，可帮助您确保测试套件涵盖了每一个关键的 UI 变体。

由 Vitest 提供支持

我们选择 Vitest 是因为它被认为是 Jest 的事实上的继承者，具有更好的性能和开发者体验。Vitest 的测试运行器为我们的侧边栏提供 Storybook Test 的支持，并使您能够在 CLI/CI 中运行，而无需 Storybook。

Vitest 会将您的所有故事视为测试，并与 Vitest 单元测试一起输出结果。

此外，采用 Vitest 可以解锁整个生态系统的集成。例如，您可以在 Visual Studio Code 中运行所有 Vitest 测试，并在编辑代码时内联查看结果。由于 Storybook 故事就是 Vitest 测试，因此您可以在组件测试和单元测试之间获得相同的无缝工作流。

立即试用

Storybook Test 是新 Storybook 9 项目中推荐安装的一部分。

npm create storybook@latest

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

npx storybook@latest upgrade

然后添加 Vitest 插件以获得核心组件测试体验。您还可以添加可访问性插件和视觉测试插件。

npx storybook add @storybook/addon-vitest
npx storybook add @storybook/addon-a11y
npx storybook add @chromatic-com/storybook

在 Storybook Test 文档中获取完整的文档和示例。

下一步是什么？

Storybook 9 是我们一年来构建 Storybook Test 的工作成果。我们的愿景是创建一个最符合人体工程学的、功能齐全的 UI 测试工具。为此，我们正在考虑以下改进：

• 一流的 MSW 数据模拟。
• 自动多视口/主题/区域设置测试
• 每个故事的多个测试步骤的语法糖

我们希望您的反馈来帮助确定 Storybook 的发展方向。在 GitHub 上加入讨论 →