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

Posted 2023-02-19

【中文标题】酶、ReactTestUtils 和 react-testing-library 之间的区别

【英文标题】：Difference between enzyme, ReactTestUtils and react-testing-library

【发布时间】：2019-06-06 17:34:34

【问题描述】：

用于反应测试的酶、ReactTestUtils 和 react-testing-library 有什么区别？

ReactTestUtils 文档说：

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

酶文档只是说：

Enzyme 是一个用于 React 的 javascript 测试实用程序，它使测试变得更容易 断言、操作和遍历 React 组件的输出。

React-testing-library 文档：

react-testing-library 是一个非常轻量级的测试解决方案 反应组件。它提供了轻量级的实用功能 反应域。

为什么实际上每种解决方案都更容易，而另一种解决方案无法实现？

【问题讨论】：

这是 reactjs.org/docs/test-utils.html ，不是 react-utils，不是吗？

@estus 是的，你是对的。我已经编辑了问题。

【参考方案1】：

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

Enzyme 和 react-testing-library 都是很好的库，可为您提供测试应用程序所需的所有工具。不过，他们有两种不同的理念。

Enzyme 允许您访问组件的内部工作。您可以读取和设置状态，还可以模拟孩子以使测试运行得更快。

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

根据我的经验，酶更容易掌握，但从长远来看，它更难维护。 react-testing-library 迫使您编写平均而言更复杂的测试，但它会奖励您对代码的更高信心。

【参考方案2】：

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

react-testing-library 用于黑盒集成/e2e 测试。它在内部使用 React 渲染器和 ReactTestUtils，需要真正的 DOM，因为它是在测试中断言的组件输出，而不是内部。它不提供用于隔离单元测试的工具，但可以通过模拟包含需要通过其他方式监视、模拟或存根的组件的模块来做到这一点，特别是jest.mock。

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

【讨论】：

一个重要的说明是 Enzyme 和 react-testing-library 是构建在 ReactTestUtils 之上的自定义实用程序。非常有用的:)

截至 2021 年，React 现在只推荐 React 测试库 (reactjs.org/docs/testing.html)

所以“jest”仅用于模拟目的？

@vikramvi 用于模拟、断言、运行测试... Jest 是测试框架，这就是它的目的。关于jest.mock 的提及，Enzyme 提供了额外的工具来模拟组件，这应该是在使用 RTL 时通过 Jest 来完成的。

【参考方案3】：

React 测试库可以替代 Enzyme。它们有非常不同的测试理念 - Enzyme 鼓励（并提供实用程序用于）使用渲染的组件实例测试实现细节，而 RTL 鼓励通过查询和做出关于实际 DOM 节点的断言来仅测试“最终结果”。