前言
在前端开发中，我们经常需要对我们的代码进行单元测试，以确保功能的正确性和稳定性。React 是目前最流行的前端库之一，针对 React 组件的测试工具也受到了关注。其中，Enzyme 和 React Testing Library 是两个常用的测试库，两者各有优劣。本文将会对 Enzyme 和 React Testing Library 进行详细比较。
Enzyme
Enzyme 是一个 React 组件测试库，由 AirBnB 开发，自动化测试和交互测试框架 Selenium 的设计和思想启发了 Enzyme 的设计。它的主要特点是可以对组件的内部状态和 DOM 的树状结构进行模拟，可以方便地检查组件的输出和交互行为。
安装
Enzyme 支持在 Jest、Mocha、Chai 和 Jasmine 等测试框架中使用。要使用 Enzyme，需要进行安装。首先需要安装 Enzyme 的核心库（enzyme）以及适配器库（enzyme-adapter-react-16）。假设您正在使用 Jest，它们的安装命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16
示例代码
我们来看一个使用 Enzyme 的示例代码。
假设我们想要测试一个简单的 TodoList 组件，该组件有一个可以添加任务的输入框和任务列表，具体实现如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- -------- - -- -- -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- ----------------- - --- -- -
-------------------------
--
----- ----------------- - -- -- -
----------------- --------
-------------
--
------ -
-----
------ ----------- ------------- ---------------------------- --
------- ----------------------------------------
----
---------------- ------ -- -
--- -----------------------
---
-----
------
--
--
------ ------- ---------我们可以使用 Enzyme 来测试这个组件的正确性。首先创建测试文件（TodoList.test.js），然后写下以下测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ------ ----- --- -------- -- -- -
----- ------- - ----------------- ----
-------------------------------------------------------------
-------------------------------------------------
---
---------- --- ---- ---- ----- --- -------- -- -- -
----- ------- - ----------------- ----
---------------------------------------- - ------- - ------ ------ - ---
-----------------------------------------
---------------------------------------------
---
---在第一个测试用例中，我们测试组件是否成功渲染了输入框和按钮。在第二个测试用例中，我们测试了组件的逻辑：当点击按钮时，是否成功添加了新的项目。
这个示例是一个非常简单的例子，但它演示了如何使用 Enzyme 来进行组件测试。
React Testing Library
React Testing Library 的目标是使 React 组件测试更加容易和可靠。相比于 Enzyme，它更加注重测试与用户的交互，而不是测试组件的内部状态和输出。它的思想是，测试中应该关注测试的是组件如何呈现给用户，而不是关注组件的实现细节。
React Testing Library 提供了一系列的 API，可以用来模拟用户的操作、查找元素、断言元素状态等。
安装
React Testing Library 可以与 Jest、Mocha、Chai 和 Jasmine 等测试框架一起使用，需要进行安装。
npm install --save-dev @testing-library/react
示例代码
我们来看一个使用 React Testing Library 的示例代码。
假设我们有一个与 Enzyme 示例中相同的 TodoList 组件，我们可以使用 React Testing Library 来测试它。首先，在测试文件（TodoList.test.js）中导入组件及相关库：
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import TodoList from './TodoList';与 Enzyme 的示例代码类似，我们编写两个测试用例：
-- -------------------- ---- -------
-------------------- -- -- -
---------- ------ ----- --- -------- -- -- -
----- - --------- - - ---------------- ----
------------------------------------------
-----------------------------------------
---
---------- --- ---- ---- ----- --- -------- -- -- -
----- - ---------- --------- - - ---------------- ----
----- ----- - ---------------------
----- ------ - --------------------
----------------------- - ------- - ------ ------ - ---
------------------------
----------------------------------------------
---
---第一个测试用例中，我们使用了 getByRole 函数来获取输入框和按钮元素，并断言它们是否存在；第二个测试用例中，我们还是通过 getByRole 函数获取到输入框和按钮元素，但这次我们触发了 change 事件和 click 事件，并使用 getByText 函数断言刚刚添加的任务是否成功。
这个示例与 Enzyme 示例代码的很多部分都相似，但需要注意的是，React Testing Library 更注重与测试运行环境模拟用户行为的一致性，而不是直接模拟组件内部的状态或实现。
对比
通过上面的示例，我们可以看到 Enzyme 和 React Testing Library 可以实现相同的测试场景。那么，它们有什么不同呢？
测试方法
Enzyme 通过 shallow、mount、render 等函数来创建组件的虚拟 DOM 树，然后可以选择在虚拟树中查找元素和触发事件，以测试其功能。React Testing Library 使用 render 函数来获取渲染的 DOM 元素，然后使用 getByRole、getByText 等辅助函数查找元素并触发事件。
Enzyme 允许用户在组件实例的生命周期和内部状态变化时进行测试，因此 Enzyme 更注重测试组件的内部实现细节。React Testing Library 则更注重在测试中考虑最终用户交互，对于组件的实现细节不关心，它更注重测试组件的输入和输出。
渲染机制
Enzyme 在测试时会把整个组件、组件的子组件、虚拟 DOM 表示的单个组件都一起渲染在内存中，这样可能会导致测试变得冗长且不可维护，而且开发者必须小心避免不必要的重新渲染。React Testing Library 采用单一的渲染通道，它会对组件进行一次真实的渲染（就像普通用户看到的一样），然后可以获取和操作组件中的节点。
因此，React Testing Library 更适合与 React 生态系统中的其他工具和库集成，它更适合测试组件在浏览器中的实际行为和用户交互。
影响
Enzyme 的发布周期比 React 的长，这意味着它可能不太容易适应 React 16 与 17 中的新功能。React Testing Library 只要在其库的当前发布周期中，就可以应用 React 的新功能。
结论
Enzyme 和 React Testing Library 都是 React 测试库，它们都有自己的使用场景和优缺点。Enzyme 更加关注组件的内部实现细节，并允许用户在多个渲染层级中查找元素。React Testing Library 更注重最终用户的交互，用户使用同样的 API 进行测试，它更适合使用最终大小写的用户事件集成测试。针对不同的场景，选择合适的库是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670fe3475f5512810268052d