UI 测试最佳实践

在Glassdoor，我们非常重视测试，但主要关注的是端到端 (E2E) 集成测试，而不是小型、快速的单元测试。过去几周，我一直在编写大量的 UI 测试，并想分享一些我一直遵循的模式——希望这能帮助在编写测试时做出正确的决策，并简化编写更易于维护的代码。

动图

我将提供的函数名称和示例特定于Jest和RTL，但这些概念适用于其他前端测试库。

知道什么不该测试🧠

是的，我要分享的最重要的概念就是不要进行测试。这或许并不适用于所有情况，但在 Glassdoor，我们进行的是全面的端到端集成测试，了解这些测试提供的覆盖范围以及它们应该覆盖的用例至关重要，而不是进行 UI 测试。

并非所有功能都需要集成测试。如果一个用例需要大约 3-4 个模拟，并且体验包括打开/关闭模态窗口和更新状态，那么应该进行集成测试。但是，当添加或创建新的前端组件时，简单的单元测试就足够了。

❌ 单元测试（E2E）的坏例子：

• 确保用户登录（用户输入、响应）按预期工作并允许用户查看管理页面。

✅ 好的例子：

• <option>向 a添加新的<select>并验证其是否显示。
• 向按钮添加点击事件并确认其触发。

明智地使用快照📸

快照测试是跟踪组件意外更改的好方法。但不应将其与实际测试混淆。

快照的用例是，当对共享组件进行更改时，它会提供受影响组件的列表。但仅此而已！仍然需要手动操作来确认更改是否破坏了这些组件。

使其可读

测试就像代码一样，最终会被编译成一堆乱码。开发人员的职责是编写干净、清晰的代码，以便将想法传达给解释它的计算机和其他阅读它的开发人员。

Jest为测试文档提供了非常易读的语法，所以请使用它！

❌ 缺点：

describe('component', () => {
  it('performs correctly', () => {
    ...
  });
});

✅ 好：

describe('the admin page', () => {
  describe('when a user is not logged in', () => {
    it('shows a login button', () => {
      ...
    });
  });
});

注意，测试输出读起来就像一个完整的句子——这正是你应该始终努力追求的。这样，如果测试在提交或持续集成中失败，就能找到明确的原因。

简洁且一致

每个测试都应尽可能小。同样的概念也适用于 DRY 原则；以下是一些值得遵循的良好模式示例：

• 如果有多个测试共享相同的逻辑，请通过beforeEach或 共享afterEach。
  • 如果测试一个组件的多个方面，请在中定义一次渲染beforeEach。
• 如果组件内部有测试中引用的值，请将它们拉出到 const 中，并在测试和组件中导入它们。
  • 例如，在检查国际化字符串时，您可以引用该键的 i18n 库的输出，而不是对英文值进行硬编码。
• 优先使用测试 ID，而不是匹配原始文本，以防文本发生变化。如果您的团队采用的模式与 RTL 鼓励的模式 ( ) 不同，请在您的配置data-testid中指定。
  • 在 Glassdoor 我们使用data-test
• 如果在多个测试中使用相同的模拟，请在测试之外定义响应并在两个地方引用它。

模拟获取🔮

对于数据驱动的组件，模拟 API 响应非常简单，并且允许测试反映其在生产环境中的使用情况。随着钩子的出现，现在可以更轻松地将请求放置GET在组件输出旁边，并且模拟这些数据也同样简单！

我一直在使用@react-mock/fetch，它可以非常轻松地模拟组件依赖的任何 HTTP 请求。只需将组件包装在 a 中<FetchMock>并提供响应即可：

import { FetchMock } from '@react-mock/fetch';

const mockedResponse = {
  matcher: '/ay',
  method: 'GET',
  response: JSON.stringify({ body: 'yo' })
};

render(
  <FetchMock options={mockedResponse}>
    <MyComponent />
  </FetchMock>
);

根据用例，您可能需要将测试包装在act()或setImmediate()继续进行事件循环的下一次迭代并允许组件呈现。

何时运行测试🚀

Glassdoor 的做法分为多个阶段：

• 哈士奇 prepush钩在推到远程之前，以及
• merge将拉取请求合并到目标分支之前的Jenkins构建

这取决于您的团队以及您希望如何组织您的 CI，但您应该至少执行其中一项，以将您的测试定位为防止破坏的防线。

完结👋

现在就这些了，去写一些测试吧！

动图