React 是目前最受欢迎的前端框架之一，但是如何进行单元测试呢？为了保证代码质量，我们需要使用测试工具进行测试。本文介绍如何使用 Enzyme 和 Jest 进行 React 单元测试，并提供详细的示例代码。
Enzyme 是什么？
Enzyme 是一个用于 React 理解和测试的 JavaScript 测试实用工具集。它是由 Airbnb 开发的，可用于测试 React 组件的输出和行为。 Enzyme 提供了一个类似于 jQuery 的语法，使得测试 React 组件变得更加简单。
Jest 是什么？
Jest 是 Facebook 开源的一个 JavaScript 测试框架。它具有功能丰富的 API，包括代码覆盖率报告、快照测试、异步测试等。Jest 是一种轻量级的测试框架，并有着非常高的性能。
React 单元测试的重要性
在开发过程中，单元测试可以很好的帮助我们减少错误的出现和确认错误的位置，便于快速的进行调试和重构，并且可以确保代码的质量和可维护性。因此，进行 React 单元测试是非常重要的一个环节。
Enzyme 的使用
Enzyme 可以帮助我们测试 React 组件的输出和行为。Enzyme 可以使用 mount()、shallow() 和 render() 这三个方法来渲染 React 组件并模拟用户的操作。
- mount()：在全渲染模式下渲染整个组件层次结构，可以交互并操作子组件。
- shallow()：进行浅度渲染，只渲染当前组件，不渲染其子组件。
- render()：将 React 组件渲染为静态 HTML 字符串，并返回一个 Cheerio 对象，类似于 jQuery 对象。
在本文示例中，我们使用 shallow() 方法进行测试。
安装 Enzyme
首先，我们需要通过 npm 来安装 Enzyme：
npm install enzyme --save-dev
安装完毕后，可以使用下面的代码初始化 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });编写测试用例
在编写测试用例之前，我们先创建一个简单的 React 组件，通过下面的代码创建一个组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - - -------- - --
---------------- - ----------------------------
-
------------- -
--------------- -------- ------------------ - - ---
-
-------- -
----- - ------- - - -----------
------ -
---- -------------------------
------ --------------
----------------
------- -------------------------------- -----------
------
--
-
-
------ ------- ------------在测试用例中，我们需要引入 React 和 Enzyme，然后使用 shallow() 方法来渲染组件并模拟用户的操作，最后进行断言验证测试用例的正确性。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------- ------- -- -- -
----- ------- - -------------------- ----
--------------------------------------
---
---------- -------- ------- ----- ---- ------ --------- -- -- -
----- ------- - -------------------- ----
----- ------ - -----------------------
-------------------------
-----------------------------------------
---
---------- ------ --- ------- ------- ------- ------- -- -- -
----- ------- - -------------------- ----
----- ----- - -------------------------
------------------------
---
---测试结果如下：
PASS src/MyComponent.test.js
MyComponent
✓ render without crash (6 ms)
✓ should increase counter value when button clicked (1 ms)
✓ should render the correct initial counter value (1 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 totalJest 的使用
Jest 是 Facebook 开源的一个 JavaScript 测试框架。在 React 应用中，使用 Jest 进行单元测试可以帮助我们轻松地测试组件及其相关行为，确保组件的行为符合我们的预期。
安装 Jest
安装前，需要先在项目中安装 Jest：
npm install --save-dev jest
创建一个名为 tests 的文件夹（如果您使用的是 Create React App，则会自动生成此文件夹）。在该文件夹中添加一个名为 example.test.js 的文件。在该文件中，导入实现我们要测试的代码的模块，并编写测试用例。
编写测试用例
在编写测试用例之前，我们需要安装 babel-jest 和 react-test-renderer：
npm install --save-dev babel-jest react-test-renderer
然后在项目根目录下创建一个 .babelrc 文件，并添加如下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}这样可以让 Jest 使用 Babel 进行转换。
下面是一个简单的测试用例，用于测试 MyComponent：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ----------- ---- ----------------- --------------- ------- ----------- -- -- - ----- --------- - ---------------------------- ---- ----- ---- - ------------------- ------------------------------- --- ------------ ----- ------ -------- --- --------- -- -- - ----- --------- - ---------------------------- ---- ----- -------- - ------------------------ ----- ------ - ------------------------ -- ------- --- ---------- ----------------------- --------------------------------------- ---
第一个测试用例的作用是使用 renderer.create() 方法渲染组件并将其转换为 JSON 格式，然后使用 toMatchSnapshot() 方法进行快照测试，确保组件的输出符合我们的预期。
第二个测试用例用于测试点击事件是否能够正确地增加计数器的计数器。我们不再使用 React Test Utils，而是使用 Jest 自带的测试工具来模拟用户点击事件。
测试结果如下：
PASS __tests__/example.test.js ✓ Component renders correctly (41ms) ✓ button click should increase the counter (10ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total
总结
本文介绍了如何使用 Enzyme 和 Jest 进行 React 单元测试，并提供了详细的示例代码。单元测试是确保应用程序稳定性和正确性的重要环节，应该在开发过程中得到重视。在使用 Enzyme 和 Jest 进行单元测试时，我们应该根据实际情况选择合适的测试工具并编写全面的测试用例，从而确保代码的质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e98db9f6b2d6eab34cd70a