在前端开发中,我们常常需要进行组件测试。而 Enzyme 是 React 组件测试框架中最常用的一个。但是,由于 Enzyme 的维护者在去年宣布停止维护 Enzyme,这对于使用 Enzyme 的开发者来说是一个不小的打击。本文将介绍 Enzyme 的滞后计划,并介绍一些替代方案来解决 Enzyme 停止维护的问题。
在 Enzyme 停止维护的消息发布后,社区中一些人员组织起来,为 Enzyme 的开发和维护继续提供支持。他们称自己为 "Enzyme 后备团队",计划在去年 Enzyme 停止维护后继续维护 Enzyme 。在这一计划的支持下,Enzyme 后备团队发布了 Enzyme@3.11.0 版本,该版本已经升级到 React 17,并添加了对 React 17 的兼容性。
但是,这仅仅是一项计划而已。随着时间的推移,我们不能保证 Enzyme 后备团队能够一直为 Enzyme 提供持续的支持。而且,在发布新版本的过程中,我们也可能会遇到问题。
替代方案
虽然 Enzyme 可能会停止更新,但是仍然有一些替代方案可以继续测试 React 组件。这些替代方案可以满足测试和开发的要求。
React Testing Library
React Testing Library 是另一个测试 React 组件的工具,它的主要目标是使测试更接近于传统的用户行为测试。相比于 Enzyme,React Testing Library 更关注组件的用户交互方面,而不是组件的实现。这些交互可以是用户手动完成的,也可以是由程序执行的。
React Testing Library 非常适合测试已经发布的 React 组件库。这是因为使用 React Testing Library 进行测试的人可以模拟用户与组件的交互,而不必访问组件的内部实现。这使得更容易发现组件的使用问题。
Testing Library
Testing Library 是一个通用的 JavaScript 测试工具库。它不仅可以用于测试 React 组件,还可以用于测试任何类型的 JavaScript 应用程序。Testing Library 将重点放在用户行为上,而不是组件实现,这使得测试更容易编写和理解。和 React Testing Library 一样,Testing Library 可以帮助我们更好地理解我们的代码和组件是如何与用户的操作交互的。
值得注意的是,Testing Library 并不能替代 Enzyme,因为 Testing Library 缺少 Enzyme 一些特定的工具,如 shallow
、 mount
、 find
等。但是,Testing Library 具备更加通用的适用性。
迁移指南
如果你仍然希望使用 Enzyme,那么你应该考虑使用 Enzyme 的滞后计划,并且你还应该执行以下迁移步骤:
1.迁移到 Enzyme 的升级版。如果你仍然使用 Enzyme 2.x.x 版本,你可以升级到 Enzyme 后续项目的 3.x.x 版本。
2.替换渲染函数。如果你使用的是 ReactTestUtils.renderIntoDocument
函数来获取组件的根 DOM 元素,请使用 Enzyme 的 mount
函数来代替。
3.使用 React Testing Library。尝试使用 React Testing Library 来代替 Enzyme 进行测试。
总结
Enzyme 的停止维护对 React 组件测试的开发人员产生了一些不良影响。然而,通过使用 React Testing Library 或者 Testing Library,进行测试仍然是完全可行的。虽然 Testing Library 无法替代 Enzyme 的所有特定工具,但它是一个可重复使用的工具库,可以为很多不同类型的 JavaScript 应用提供帮助。如果你选择使用 Enzyme,你应该考虑使用 Enzyme 后备团队的版本,并注意迁移过程中的重点问题。无论你选择哪种方法,最终目标是确保你的 React 组件在开发和部署时都可以进行正确的测试。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ --- ---- -------- -------------- --- ------ ---------- --------- -- -- - ----- ------- - ---------- ---- ----- ------ - ----------------------- ----- ------- - ------------------- ------------------------- ------------------------------------ ------------------------- ------------------------------------ ---
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/651bf04595b1f8cacd3883e9