Storybook Test 抢先看

每个人都曾深受前端测试之苦。开发人员想要创造出色的功能，却因调试不稳定的测试或照看测试套件而分心。即使 Rails 的创造者 DHH 也宣布系统测试破产。

前端测试看起来如此高尚，以至于没有人追究它拖慢我们所有人的责任。即使是最优秀的团队也尝试用质量换取速度，但最终两者皆失。

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

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

📋 立即注册抢先体验！

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

在功能开发和修复错误之间跳转会拖慢您的团队速度。您想要交付高质量的 UX，但是当您的应用程序持续开发时，很难防止回归。这对用户来说很糟糕，因为他们会受到糟糕软件的影响。这对您来说令人沮丧，因为修复错误感觉像是无尽的跑步机。

测试允许您在开发过程中尽快发现错误。因为稍后发现它们的成本可能是您团队的 10 倍到 100 倍（NASA 研究）。

前端测试的问题

询问开发人员关于他们测试的挑战，您会得到一百万个答案。我们采访了数十个团队，总结了一份清单

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

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

端到端 (E2E) 测试是测试前端最准确的方法，但由于必须启动单独的浏览器环境，因此运行速度慢且成本高昂。单元测试编写/运行速度很快，但使用假浏览器环境。

如果您可以平衡 E2E 测试的保真度和单元测试的速度呢？

我们对 Storybook Test 的愿景

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

Storybook 是开发组件的行业标准。到目前为止，已经编写了超过 3000 万个故事。如果您眯起眼睛看，故事实际上是您在浏览器中手动验证的测试。它们速度极快且可靠，因为它们不需要加载您的整个应用程序（后端、API 等）——它们加载 UI 并对其余部分进行模拟。

多年来，我们与 Cypress Component Testing (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！