Sentry 的前端测试实践:从 Enzyme 迁移到 RTL

在 Sentry,我们采用了持续交付实践,也就是说,代码一旦被合并到主分支就可以立即发布。我们因此能够快速地迭代产品,尽可能频繁地在生产环境中提供新功能、进行错误修复、配置变更和实验。我们每月合并超过 700 个 PR。自动化测试——特别是我们大型的 React 代码库自动化测试——是我们 CI/CD 流程的重要组成部分,确保我们的产品可以按照预期运行。在这篇文章中,我们将讨论如何将我们的组件测试从 Enzyme 迁移到 React Testing Library(RTL)。这项工作花费了一年零四个月的时间,有 17 名工程师参与,涉及 803 个测试套件和 4937 个测试,其中每一个测试都需要做出修改。

什么是 RTL

React Testing Library(RTL)是一个 React 组件测试库,它通过与 DOM 交互来测试组件,不像 Enzyme 那样直接使用了 React 内部的东西。RTL 是目前测试 React 组件最流行的方案,但 Sentry 在 RTL 出现之前就已经在使用 React 了。

故事开始

我们希望使用最新的现代化工具和实践,但不会因为它们是新的就一把梭哈。我们会仔细评估新技术,了解它们将给我们带来什么好处。当时我们已经知道有 RTL 了,但并没有强烈的理由要将它引入到我们的代码库中。我们用来测试组件库的 Enzyme 可以满足我们的需求。2020 年,一些之前使用过 RTL 的工程师加入了 Sentry。基于他们使用 RTL 库的经验,他们向我们的前端技术指导委员会(Frontend TSC)提出了将 RTL 引入到我们的代码库中的建议。Frontend TSC 致力于 Sentry 的 JavaScript 代码库开发工作,他们每两周开会一次,为公司整体的前端开发团队讨论和总结最佳开发实践。当时,我们已经在大规模地向 TypeScript 迁移,虽然迁移到 RTL 的想法听起来不错,而且我们也知道 Airbnb 已经将 Enzyme 的所有权转到了 GitHub,并且现在也在使用 RTL,但我们还没有为新的迁移做好准备。尽管如此,我们还是希望对此做一些概念验证(PoC),比较一下 RTL 和 Enzyme,并评估迁移将给我们带来哪些好处。我们对性能提升这一块特别感兴趣,因为我们当时的测试执行得非常慢。