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

Difference between enzyme, ReactTestUtils and react-testing-library

用于反应测试的酶、ReactTestUtils 和反应测试库之间有什么区别?

ReactTestUtils 文档说:

ReactTestUtils makes it easy to test React components in the testing framework of your choice.

酶文档只是说:

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

React-testing-library 文档:

The react-testing-library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom.

为什么实际上每个解决方案都更简单,而另一个解决方案无法实现什么?

ReactTestUtils 为您提供了测试 React 组件的最低限度。我还没有看到它被用于大型应用程序。

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

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

另一方面,react-testing-library 不会让您访问任何实现细节。它呈现组件并提供与它们交互的实用方法。这个想法是您应该以与用户相同的方式与您的应用程序通信。因此,与其设置组件的状态,不如重现用户为达到该状态所做的操作。

根据我的经验,Enzyme 更容易掌握,但从长远来看 运行,它更难维护。 react-testing-library 强制您编写平均来说稍微复杂一点的测试,但它会让您对代码更有信心。

Enzyme 用于 unit/integration 测试。它的 API 旨在测试实现。它提供不需要 DOM(用于浅层渲染)的自定义渲染器,其行为与 React 渲染器不同,并允许进行对单元测试很重要但默认渲染器不可能或不直接的事情,例如同步状态更新,浅渲染、禁用生命周期方法等

react-testing-library 用于黑盒 integration/e2e 测试。它在内部使用 React 渲染器和 ReactTestUtils,需要真实的 DOM 因为它是在测试中断言的组件输出,而不是内部。它不提供用于独立单元测试的工具,但可以通过模拟包含需要通过其他方式(特别是 jest.mock)进行监视、模拟或存根的组件的模块来实现。

react-dom/test-utilsreact-test-renderer 包含功能的子集,Enzyme 和 react-testing-library建立在他们之上。 API 稀缺,需要编写样板代码或自定义实用程序函数才能进行全面测试。 React officially promotes Enzyme 和 react-testing-library 是更好的选择。

React 测试库可以替代 Enzyme。他们有非常不同的测试哲学——Enzyme 鼓励(并提供实用程序)使用组件的渲染实例测试实现细节,而 RTL 鼓励通过查询和断言实际 DOM 节点来仅测试 'end result'。

在 Enzyme 中,我们使用组件的状态和属性来测试组件。这通常意味着测试是脆弱的。 假设我们已经为一个组件编写了测试并且 运行 没问题。但是,如果有人更改了组件中 state 或 props 的变量名,那么即使组件的功能没有改变,我们的测试也会失败。这种行为证明了测试的脆弱性。

而在 React 测试库中,我们从用户的角度来测试组件。假设我们要测试一个 drop-down 组件,我们不会根据它的状态和属性来测试该组件。相反,我们使用 DOM 元素来测试它,看看用户如何与它交互。

React 测试库的主要目的是通过以用户使用它们的方式测试您的组件来提高您对测试的信心。用户不关心幕后发生的事情,他们只是看到输出并与之交互。您无需访问组件的内部 API 或评估它们的状态,而是通过基于组件输出编写测试来获得更多信心。

在某些时候,React 测试库的使用比 Enzyme 更广泛。