互动测试先睹为快

Storybook 是构建组件驱动用户界面的行业标准工具。它实现了结构化的 UI 开发、文档编写和测试。

我很高兴分享 Storybook 增强型测试功能的预览。Stories 捕获组件的关键状态。Shopify、Adobe 和 O’Reilly Media 等领先团队已经在其测试文件中导入 stories，以扩展 UI 测试覆盖率。现在，该工作流程已内置于 Storybook 中。

Storybook 互动测试允许您在 story 本身中编写互动脚本并检查预期结果。这使您可以在开发 UI 的同一环境中（浏览器中）运行功能测试。

• ✅ 在真实浏览器中运行
• ⚡️ 无需等待，不会产生虚假错误
• 🐙 由 Testing Library 驱动
• 🔗 使用 URL 重现错误
• 🔍 快速调试
• 🛠 低维护成本

等等，但为什么？

Storybook 的核心创新是“story”构造。只需少量工作，您就可以捕获组件支持的每种状态。

Stories 就像测试，但用于 UI。它们表示当传递静态输入（如 props 和 context）时，组件应该如何渲染。这种细粒度级别简化了 UI 错误的来源调试，消除了虚假错误，并且编写起来很自然。

但是，如果您想测试交互式组件行为（真实用户如何与组件交互）呢？

目前，您需要将 stories 导入测试工具以编写额外的交互脚本。或者，您可以运行笨拙的 QA 套件并复制测试用例。在这两种情况下，您都可能花费更多时间维护测试套件，而不是实际编写测试。

如何防止 UI 损坏

想象一下，如果您可以在同一个地方构建 UI 和测试 UI 会怎样？如果您的组件包含对其行为方式的预期，您就会立即知道它们何时损坏。

Storybook 互动测试会探测和刺激 UI 以模拟用户行为。它们在后台运行，以便在代码更改导致组件行为异常时通知您。

// FormExample.stories.js|tsx
 
import { expect, screen, userEvent } from '@storybook/addon-test';
 
export default { component: FormExample }
 
export const Empty = {};
 
export const Filled = {
  ...Empty,
  play: async () => {
    await userEvent.type(screen.getById('user'), 'shilman@example.com');
    await userEvent.type(screen.getById('password'), 'blahblahblah');
    await userEvent.click(screen.getByText('Submit'));
 
    await expect(handleSubmit).toHaveBeenCalledWith({
      user: 'shilman@example.com',
      password: 'blahblahblah',
    });
  }
}

用于 UI 测试的 Storybook

我们与 Shopify、Washington Post、Adobe 和更大的 Storybook 社区的团队进行了交谈。很明显，开发人员必须测试组件行为，但却被笨拙的 QA 工具和虚假错误所困扰。

UI 测试应该快速且简单。 Storybook 允许您在 story 本身内编写互动测试。 每次您点击保存时，您的测试都会运行。

用于互动和预期的 Play 函数

互动测试使用 Component Story Format 的 play 函数解锁。Play 函数是一小段代码，在 story 渲染后执行。它允许您

• 在真实浏览器中编写用户互动脚本
• 使用断言/预期验证行为
• 组合互动以减少维护负担

考虑一个带有 4 个 stories 的示例 RangeSlider 组件。为了检查它是否正常工作，您必须输入价格或拖动滑块来更改平均价格。这就是 play 函数的闪光点。

当每个 story 渲染时，play 函数运行互动和预期。测试结果会立即显示在您的 story 旁边。

用于调试的回放控件

“互动”面板可视化 play 函数中的每个互动，并包括用于重现每个步骤的回放控件。

单击某个步骤可跳转到执行用户事件时组件的确切状态。

使用回放控件来观察步骤之间的中间状态。或者重放 story 的所有步骤，以仔细检查互动测试是否按预期工作。

立即获取互动测试的早期访问权限！

无虚假错误，无需等待

互动测试在真实浏览器中使用您交付给最终用户的真实 DOM 元素运行。由于 UI 与后端问题隔离，因此堆栈其他部分的错误不会触发误报（虚假错误！）。

更重要的是，Storybook 互动测试以 JavaScript 执行速度（毫秒）运行，因为 UI 渲染所需的所有数据都已在客户端。

由 Testing Library 驱动

Storybook 互动测试由 Testing Library 驱动，并且可以在您喜欢的命令行工具（如 Jest 和 Playwright）中运行。我们不是在重新发明轮子；我们的目标是在现有最佳实践之上提供对开发人员友好的工效学。

用于轻松重现的永久链接

Storybook 是一个 Web 应用程序，可以在您的本地开发环境或静态主机上运行。Storybook 的状态始终编码在其 URL 中。

这意味着您可以向队友发送 URL 以重现确切的测试错误，即使他们没有本地开发环境也是如此。错误还包括相关的环境信息。

这与需要额外应用程序来执行测试和调试的 QA 工具不同。Storybook 测试开箱即用地与您已经使用的浏览器和开发人员工具一起工作。

无 API 锁定

Component Story Format 编译为 JavaScript 模块。当您编写 stories 时，您是在投资 JavaScript 作为一种标准。

CSF 与整个生态系统兼容。例如，您可以使用 Chromatic（由 Storybook 维护者提供）验证 story 外观，使用 Axe 验证可访问性，以及使用 Lighthouse 验证性能。

注册以获取早期访问版本

Storybook 互动测试正在积极开发中，因此目前是先睹为快。我们需要您的帮助和反馈才能使其成为现实。在下面注册 Storybook 的邮件列表，以获取早期访问权限和项目更新的通知。

在 Storybook 的 Discord 聊天 #testing 和 GitHub 上加入我们。我们欢迎新开发人员和资深开发人员的贡献。

Storybook 互动测试由 Gert Hengeveld、Deen Denno、Yann Braga、Michael Shilman、Tom Coleman、Michael Arestad 和 Dominic Nguyen（我！）开发，并获得了整个 Storybook 社区的反馈。