Sentry 前端测试从 Enzyme 迁移到 React Testing Library 的经验总结

Sentry 工程团队最近在其博客中分享了将前端测试从 Enzyme 迁移到 React Testing Library（RTL）的驱动因素和所学到的经验。本次迁移的主要原因是 Enzyme 不再支持新版本的 React。整个迁移过程耗时约 20 个月，涉及 17 名工程师，审查了大约 5,000 个测试。

迁移的背景与决策

Sentry 团队曾多次考虑迁移到 RTL，但由于缺乏足够的收益，一直未付诸行动。团队表示：

我们不会因为新技术就盲目引入，而是会仔细评估其带来的实际收益。虽然我们早就知道 RTL，但当时并没有强有力的理由将其引入代码库。Enzyme 仍然能够满足我们的需求。

与此同时，Sentry 正在进行一项大规模的 TypeScript 迁移项目，再加上日常的产品开发工作，工程团队已经非常忙碌。

然而，Enzyme 测试运行时间较长，团队对提升测试速度有强烈的需求。通过概念验证，团队发现 RTL 的性能提升了 12%，但这一改善被认为不足以启动另一个长期的迁移项目。

Enzyme 与 RTL 的对比

Enzyme 的缺点包括：

• 不支持无障碍测试
• 不会自动清理测试环境
• 经常直接访问被测组件的状态

相比之下，RTL 更接近集成测试，致力于从用户的角度测试应用用例，避免测试实现细节。这意味着，只有当实现更改确实引入 bug 时，测试才会失败。

迁移的最终驱动因素

随着 Sentry 完成 TypeScript 迁移并开始升级到 React 17，情况发生了变化。React 17 的更新导致 Enzyme 无法完全兼容，且 React 18 将需要 Enzyme 的完全重写，而 Airbnb 已停止对 Enzyme 的支持。RTL 不依赖于 React 的内部实现，因此能够与 React 18 兼容。

迁移过程与挑战

在决定迁移后，团队专注于最小化迁移项目的风险，采取了以下措施：

• 估算不同假设下的工程时间
• 采用迭代方法而非一次性迁移
• 跟踪进度
• 提供 RTL 培训
• 推广最佳实践
• 进行每日代码评审

整个迁移耗时 18 个月（原计划为 14 个月），期间团队移除了过时的测试，改进了无障碍测试，并开始基于用户用例而非实现细节编写测试。

迁移后的结果与反思

尽管测试性能没有显著提升（这是最初概念验证的主要关注点），但团队对迁移结果持积极态度：

虽然测试性能没有如预期般提升，但引入 RTL 带来了许多其他好处，例如测试不再依赖实现细节，而是测试用户看到和交互的内容。最终，这才是最重要的。

团队还提到，在严格按照 RTL 建议进行测试时，遇到了一些意外的性能问题。例如，除了模拟 Web API 外，还需要尽可能真实地模拟用户行为。

技术细节与进一步阅读

Sentry 团队在原文中详细讨论了技术细节，并提供了定量数据和定性说明，供其他工程团队参考。

关于 React Testing Library

React Testing Library 是用户界面测试库系列之一，其他类似的库包括 DOM Testing Library、Vue Testing Library、Svelte Testing Library 和 Puppeteer Testing Library。这些库的共同理念是：

你希望你的测试库在长期内保持可维护性，以便组件的重构（实现更改而非功能更改）不会破坏测试并拖慢你和团队的进度。DOM Testing Library 提供了查询 DOM 节点的工具，其方式与用户在页面上查找元素的方式相似。测试越接近软件的使用方式，越能给你带来信心。