酶(Enzyme)、ReactTestUtils 和 react-testing-library 之间的区别

92

酶、ReactTestUtils和react-testing-library在React测试中有何区别?

ReactTestUtils文档称:

ReactTestUtils使得在您选择的测试框架下测试React组件变得容易。

Enzyme文档只是说:

Enzyme是一个为React编写的JavaScript测试工具,它更容易地进行断言、操作和遍历React组件的输出。

react-testing-library文档如下:

react-testing-library是一种非常轻量级的用于测试React组件的解决方案。它在react-dom之上提供了轻巧的实用程序函数。

为什么每个解决方案实际上都更容易,并且其他解决方案不能实现什么?


这是 https://reactjs.org/docs/test-utils.html,不是 react-utils,对吧? - Estus Flask
@estus 是的,你说得对。我已经编辑了问题。 - Black
Enzyme不支持最新版本的React https://dev59.com/Q1IG5IYBdhLWcg3whggn - Michael Freidgeim
4个回答

163

ReactTestUtils提供了最基本的测试React组件的工具。我没看到它被用于大型应用程序。

Enzyme和react-testing-library都是好的库,它们可以为您提供测试应用程序所需的所有工具。但两者有不同的哲学。

Enzyme允许您访问组件的内部工作原理。您可以读取和设置状态,并模拟子元素以使测试运行更快。

另一方面,react-testing-library不会给您任何访问实现细节的权限。它会渲染组件并提供实用方法与其交互。其思想是你应该像用户一样与你的应用程序通信。因此,与其设置组件的状态,你要重现用户达到那个状态的操作。

在我的经验中,Enzyme更容易理解,但从长远来看,它更难以维护。react-testing-library强制你编写平均复杂度更高的测试,但它以更高的代码可靠性为代价。


71

Enzyme 旨在进行单元/集成测试。其API被设计用于测试实现。它提供了一个自定义渲染器,不需要DOM(用于浅层渲染),与React渲染器行为不同,并允许在默认渲染器中不可能或不直接的单元测试的重要内容,如同步状态更新、浅层渲染、禁用生命周期方法等。

react-testing-library 旨在进行黑盒集成/端到端测试。它使用React渲染器和ReactTestUtils内部,需要真实的DOM,因为是在测试中断言组件的输出,而不是内部。它不提供隔离的单元测试设施,但可以通过模拟包含需要被其他方式间谍、模仿或存根的组件的模块来实现这一点,特别是使用jest.mock

react-dom/test-utilsreact-test-renderer 包含一部分功能,Enzyme和react-testing-library是基于它们构建的。API 稀缺且需要编写样板代码或自定义实用函数进行全面的测试。React官方推广Enzyme和react-testing-library作为更好的选择。


13
重要澄清:Enzyme和react-testing-library是基于ReactTestUtils构建的自定义实用程序,非常有用 :) - kqcef
7
截至2021年,React 现在仅推荐使用 React Testing Library 进行测试(https://reactjs.org/docs/testing.html)。 - Borduhh
“jest” 仅用于模拟测试目的吗? - vikramvi
1
@vikramvi 对于模拟、断言和运行测试... Jest 是一个测试框架,这是它的目的。关于 jest.mock 的提及,Enzyme 提供了额外的组件模拟功能,当使用 RTL 时应该通过 Jest 来完成。 - Estus Flask

9
在Enzyme中,我们使用组件的状态和属性来测试组件。这通常意味着测试是脆弱的。假设我们已经为一个组件编写了测试,它正在正常运行。但是如果有人更改了组件中状态或属性的变量名称,即使组件的功能没有改变,我们的测试也会失败。这种行为展示了测试的脆弱性。
而在React Testing Library中,我们从用户的角度测试组件。假设我们想要测试下拉组件,我们不会根据其状态和属性来测试组件。相反,我们使用DOM元素进行测试,就像用户与其交互一样。
React Testing Library的主要目的是通过以用户使用组件的方式测试组件来增加测试的信心。用户并不关心幕后发生了什么,他们只看到并与输出进行交互。通过基于组件输出编写测试,而不是访问其内部API或评估其状态,您将获得更多的信心。
在某个时候,React Testing Library比Enzyme被更广泛地使用。

enter image description here


5

React Testing Library可以替代Enzyme。它们有非常不同的测试理念-Enzyme鼓励(并提供工具)使用渲染组件实例来测试实现细节,而RTL则通过查询和对实际DOM节点进行断言,仅鼓励测试“最终结果”。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接