交互测试先睹为快

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 旁边。

用于调试的播放控制

“Interactions”面板可视化显示 play 函数中的每个交互，并包含用于重现每个步骤的播放控制。

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

使用播放控制来观察步骤之间的中间状态。或者重放 story 的所有步骤，再次检查交互测试是否按预期工作。

在下方获取交互测试的早期访问权限！

稳定可靠，无需等待

交互测试在真实的浏览器中运行，使用您提供给最终用户的真实 DOM 元素。由于 UI 与后端无关，堆栈中其他部分的错误不会触发误报（flake！）。

更重要的是，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 社区的反馈。