Storybook Test 抢先看

每个人都被前端测试搞得焦头烂额。开发者想创建很棒的功能，但却被调试不稳定或维护测试套件分散了精力。就连 Rails 的创建者 DHH 也宣布系统测试破产。

前端测试似乎非常“高尚”，以至于没人追究它拖慢我们所有人的责任。即使是最优秀的团队也曾试图用质量换速度，结果却一无所获。

在 Storybook，我们相信仍有希望。数月以来，我们一直在构建 Storybook Test，这是一款用于快速、稳定的 UI 测试的工具。现在，我们终于准备好与您分享它了。

⚡️ 在浏览器中运行的极速测试
🌈 同时进行组件、可视化和无障碍测试
🚦 在 Storybook 内部可视化结果
👉 在您自己的浏览器中点击调试
🌐 针对测试覆盖率进行优化
💻 通过 Vitest 集成 VSCode

📋 立即申请早期访问！

为什么还要费心测试你的前端？

在功能开发和修复 bug 之间来回切换会拖慢你的团队。你希望交付高质量的用户体验，但当你的应用程序持续开发时，很难防止回归。这对用户来说很糟糕，因为他们会遇到不稳定软件。这对你来说也很令人沮丧，因为修复 bug 就像永无止境的跑步机。

测试让你能够在开发过程中尽快找到 bug。因为晚些时候找到它们对你的团队来说成本可能会高出 10 到 100 倍（美国宇航局研究）。

前端测试的问题

询问开发者他们的测试挑战，你会得到无数个答案。我们采访了几十个团队，列出了一个简短列表

❌ 运行缓慢
❌ 不稳定测试导致假阳性
❌ 工具笨重
❌ 调试痛苦
❌ 不在浏览器中运行
❌ 编写和维护成本高昂

所有这些问题的共同点在于，前端代码旨在用于 Web 浏览器。测试工具需要竭尽全力来适应浏览器环境。

端到端 (E2E) 测试是测试前端最准确的方式，但运行缓慢且成本高昂，因为必须启动一个独立的浏览器环境。单元测试编写/运行速度快，但使用一个模拟的浏览器环境。

如果你能平衡 E2E 测试的保真度和单元测试的速度呢？

我们对 Storybook Test 的愿景

我们正在创建一个专注于组件和故事的测试工具。我们相信这是解决前端测试问题的最佳方式：运行慢、不稳定、成本高、覆盖率低。

Storybook 是组件开发的行业标准。目前已经编写了超过 3000 万个故事。如果你仔细看，故事实际上就是你在浏览器中手动验证的测试。而且它们非常快速 + 可靠，因为它们不需要加载你的整个应用（后端、API 等）——它们加载 UI 并模拟其余部分。

多年来，我们与 Cypress 组件测试 (CT)、Playwright CT、Jest 和 Vitest 背后的团队合作，在这些测试环境中重用故事。但你仍然需要在工具之间切换并自己维护工具链，这增加了不少开销。

Storybook Test 将一流的工具直接集成到 Storybook 本身。你可以获得超能力，使用 Vitest 运行组件测试，使用 Chromatic 运行可视化测试，以及使用 Axe 运行无障碍测试。所有这些都在真实的浏览器中同时以极快的速度运行。测试结果显示在 Storybook 应用中故事旁边。

Storybook Test 预览

我们与 Vitest 合作，创建了编写、运行和调试各类前端测试（包括组件、可视化甚至无障碍测试）的最佳方式。只需点击几下，你就可以将 Storybook 故事作为测试运行，隔离失败，并在你喜欢的 Web 浏览器中进行调试。

让我们分解一下。

首先，将故事作为测试。利用 Vitest 和可移植故事的力量，Storybook Test 会自动将你的故事转换为快速可靠的 Vitest 测试。所有故事都成为冒烟测试，验证它们是否无错误渲染。此外，如果一个故事具有play 函数，该函数将作为测试的一部分运行，并且其断言会被验证。

其次，隔离失败。Storybook 的侧边栏是你的组件及其变体的目录。现在，它也是快速定位失败测试的最快途径。测试运行后，其状态会显示在侧边栏中。如果测试失败，点击侧边栏底部的红色失败计数，即可过滤显示失败的故事。

第三，在你的浏览器中调试。当你选择一个测试失败时，Storybook 会为每种测试类型提供专门的 UI，帮助你找出问题所在。

组件测试

组件测试使用新的组件测试插件面板，该面板演示了测试的每一步，并提供了前后步进的调试工具。这允许你在失败的确切时刻，在相同的环境中，使用浏览器开发工具进行调试。

在 Storybook Test 之前，我们将这些称为交互测试，并在交互插件面板中查看。

可视化测试

可视化测试失败会打开可视化测试插件面板，显示你的更改的差异视图，你可以选择接受这些更改作为预期结果，或者更新代码直到测试通过。

无障碍测试

无障碍测试失败会打开无障碍插件面板，显示违规列表，画布上高亮显示每个违规元素，并提供解决问题的建议。

加入早期访问计划

为启动该项目，我很高兴宣布一项早期访问计划，以便与 Storybook 社区的各位一起实现这一愿景。该计划将从 11 月 6 日持续到 12 月 16 日。

1. 专属 Discord，获得 Storybook 维护者的亲手帮助
2. 定期答疑时间
3. 支持和故障排除
4. 与团队成员和特邀专家进行在线会议
5. 最新 RFC、功能和修复的预发布

主要要求是你拥有 (1) 一个在 Storybook 中的前端项目，以及 (2) 渴望在 UI 测试领域开辟新天地。

使用下方表格申请早期访问计划，我们将与您联系告知后续步骤。如果需求超出我们的承受能力，我们可能会关闭申请...所以请立即申请。

👉👉 立即申请早期访问！👈👈

常见问题：这与 Storybook Test Runner 有何关系？
Storybook 的Test Runner 是 Storybook Test 的一个较旧的、仅限 CLI 的版本，使用 Jest+Playwright 实现。Storybook Test 是 Test Runner 的最新演进，更快、更可靠、更易于配置。它既可以在 CLI 中运行，也可以在 Storybook 的 UI 中运行。

仅限 CLI 的 Test Runner 被广泛使用，并且是测试 Webpack/Rspack 项目中故事的唯一方式。在可预见的未来，我们将继续维护它。但是，我们不打算为其扩展我们在 Storybook Test 中构建的新功能，例如集成到 Storybook 的侧边栏。

如果您当前在 Vite 或 Next.js 项目中使用 Test Runner，我们建议您在早期访问计划期间尝试 Storybook Test！