React 是一个非常流行的前端框架，为了确保代码的质量和稳定性，我们需要进行测试。其中 Enzyme 和 Jest 是两个常用的工具，用于测试 React 项目。本文将详细介绍 Enzyme 和 Jest 的使用方法，并提供示例代码。
Enzyme
Enzyme 是 AirBnB 公司推出的一款 React 组件测试工具。它提供了一个简洁的 API，可以轻松地测试 React 组件的渲染结果、交互行为和状态变化。下面是 Enzyme 的安装方法：
npm install --save-dev enzyme enzyme-adapter-react-16
这里使用 enzyme-adapter-react-16 适配器，适配 React 16 的版本。如果你使用的是其他版本的 React，可参考 Enzyme 的文档自行选择适配器。
测试 DOM 渲染
对于一个简单的 React 组件，我们可以通过以下代码完成对其 DOM 渲染的测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------ ----
----------------------------------
---
---上面代码中，我们首先导入了 React 和 Enzyme 的 shallow 方法，以及待测试的组件 App。之后使用 shallow 方法渲染组件，并使用 expect 断言语句，将渲染结果与期望结果进行比较。在这里，我们使用了一个快照（Snapshot）测试，这种测试会记录组件在某个时刻的输出，用于与未来的输出进行比较。
测试交互行为
除了测试 DOM 渲染，我们还可以测试组件的交互行为。对于一个包含点击事件的按钮组件，我们可以通过以下代码测试点击事件是否正确触发：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ---- ------- ---- -------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---在这里，我们首先创建了一个模拟函数 onClickMock，用于模拟点击事件处理函数。然后，我们使用 shallow 渲染了待测试的组件 Button，并在按钮元素上触发点击事件。最后，我们使用 expect 断言语句判断 onClickMock 是否被正确地调用。
测试状态变化
除了测试组件的渲染结果和交互行为，我们还可以测试组件的状态变化。一个典型的测试过程可以如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- -------- ----- ---- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -------------------------------
--------------------------------
-------------------------
--------------------------------
-------------------------
--------------------------------
---
---在这里，我们首先使用 shallow 渲染了待测试的组件 Counter，并找到按钮元素。接着，我们模拟了两次点击事件，并分别断言按钮元素的文本内容是否符合预期。
Jest
Jest 是 Facebook 推出的一款 JavaScript 测试框架，专门用于测试 React 应用。它提供了一套完整的测试工具链，包括断言库、Mock 模块、快照测试等，使用起来非常方便。下面是 Jest 的安装方法：
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react
这里我们同时安装了 babel-jest 和 @babel/preset-env / @babel/preset-react，以便 Jest 能够正确识别和编译 ES6 和 JSX 代码。
单元测试
对于一个简单的函数，我们可以通过以下代码进行单元测试：
function sum(a, b) {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在这里，我们首先定义了一个简单的加法函数 sum，然后在 test 内部调用 expect 断言语句，判断函数输出是否符合预期。如果测试通过，说明函数执行结果正确。
快照测试
快照测试是 Jest 的一大特色，它可以记录组件在某个时刻的输出结果，并自动将其保存在文件中。之后，每次测试运行的时候，都会将实际输出与预期输出进行比较，用于检查组件是否正常工作。下面是一个简单的示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ----------- ------------ --------- ---------- -- -- - ----- --------- - ----------------------- ----------- -- --------- -------------- ----- ---- - ------------------- ------------------------------- ---
在这里，我们使用了 Jest 内置的 renderer 方法，以生成组件的快照。这里需要注意，快照测试尽量不要在样式相关的组件上进行，因为样式可能受到浏览器、环境等因素的影响，导致输出结果不一致。
测试工具链搭配
最后，我们需要将 Enzyme 和 Jest 进行搭配，以便充分利用两个工具的优势。具体来说，我们可以通过以下命令将它们进行配置：
npm install --save-dev enzyme-to-json jest-enzyme
然后，在 Jest 的配置文件（一般为 jest.config.js 或者 package.json 文件）中，加入以下配置项：
"jest": {
"setupFilesAfterEnv": [
"jest-enzyme"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}这样就完成了 Enzyme 和 Jest 的互相支持。现在，我们可以通过以下代码，完成对组件的全面测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- ----------------------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - --------------- ----------- -- --------- --------------
----------------------------------
---
---------- ---- ------- ---- -------- ---- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------------- --------------
-----------------------------------------
---------------------------------------
---
---在这里，我们使用了 Enzyme 的 shallow 方法进行组件渲染，使用 Jest 自带的 expect 断言语句进行断言，用 renderer 完成了快照测试。通过这种方式，我们可以快速而准确地完成对 React 组件的测试。
结语
本文详细介绍了 Enzyme 和 Jest 的使用方法，并提供了详细的示例代码。在实际开发过程中，合理地搭配使用这两个工具，能够有效地提高代码的可靠性和稳定性，降低开发成本。同时，我们也需要关注测试的边界与覆盖率，以确保测试套件能够尽可能地覆盖所有可能的情况。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d039e9e46428fe9ecfbef5