章节

UI 测试实用指南

不会拖慢您速度的测试工作流程

此社区翻译尚未更新到最新的 Storybook 版本。请将英文指南中的更改应用到此翻译中，帮助我们更新它。欢迎提交 Pull Request.

很容易找到测试 UI 不同部分的工具。但知道如何将它们组合成一个高效的工作流程却很棘手。如果你弄错了，就会陷入维护的噩梦。

我们的工作流程通过将 stories 用作测试用例来减少维护负担。此外，我们还可以通过在组件级别进行测试来更快地发现 bug。

本章通过添加删除任务的功能来演示完整的 UI 测试工作流程。

构建

Task 组件已允许用户编辑、固定和归档任务。我们将添加一个删除按钮，并将其连接到应用程序状态，以添加删除功能。

在此演示中，让我们直接跳到准备测试的部分。下载更新的文件并将其放在 /src 目录中

视觉和组合测试

首先，我们将确保更新的 UI 样式与规范匹配。Task 组件现在需要 onDeleteTask 属性来处理删除。让我们将其作为 Task stories 中的一个 action 进行模拟。

复制

src/components/Task.stories.jsx

import Task from './Task';

export default {
  component: Task,
  title: 'Task',
  argTypes: {
    onArchiveTask: { action: 'onArchiveTask' },
    onTogglePinTask: { action: 'onTogglePinTask' },
    onEditTitle: { action: 'onEditTitle' },
+   onDeleteTask: { action: 'onDeleteTask' },
  },
};

开发过程中

您可以使用 Storybook 来专注于 Task 组件，而无需启动整个应用程序。然后循环浏览它的所有 stories 来手动验证其外观。

PR 检查

对 Task UI 的任何调整都可能导致其使用的其他组件（TaskList 和 InboxScreen）发生意外的更改。使用 Chromatic 运行视觉测试将捕获这些更改。它还将确保所有内容都已正确连接。

当您创建拉取请求时，Chromatic 将自动触发。完成后，您将看到一个 diff 供您审查。在这种情况下，更改是故意的。按“接受”按钮更新基线。

可访问性测试

开发过程中

在开发过程中，在 Storybook 中运行可访问性检查。 the A11y 插件使用 Axe 审计活动 story 并在插件面板中显示报告。快速查看即可确认我们的任何 story 都没有任何违规项。

PR 检查

要捕获回归，您需要在所有组件上运行。您可以通过将 stories 导入测试文件，然后使用 jest-axe 运行可访问性审计来实现。所有违规项都将报告回 PR 页面。

组件测试

用户可以通过单击垃圾桶按钮来删除任务，我们需要添加一个测试来验证此行为。

开发过程中

在开发过程中，通过 InboxScreen stories 手动验证交互。如果按预期工作，您可以使用 play 函数添加组件测试。

复制

src/InboxScreen.stories.jsx

// ... code omitted for brevity ...

export const DeleteTask = {
  parameters: {
    ...Default.parameters,
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const getTask = (id) => canvas.findByRole('listitem', { name: id });

    const itemToDelete = await getTask('task-1');
    const deleteButton = await findByRole(itemToDelete, 'button', {
      name: 'delete',
    });

    // Click the delete button
    await userEvent.click(deleteButton);
    await expect(canvas.getAllByRole('listitem').length).toBe(5);
  },
};

运行 yarn run test-storybook 来确认所有测试都已通过。请注意 Jest 如何在 watch 模式下运行，并且仅执行与已更改文件相关的测试。