React 单元测试入门：使用 Enzyme 测试 React 组件
单元测试是软件开发过程中的一个重要环节，可以有效提高代码质量和可维护性。在前端开发中，React 是广受欢迎的框架之一，如何对 React 组件进行单元测试也是前端工程师需要掌握的基本技能。本文将介绍如何使用 Enzyme 工具进行 React 组件单元测试。
Enzyme 简介
Enzyme 是由 Airbnb 开源的 React 测试工具。它提供了一些简单易用的 API，可以方便地对 React 组件进行测试，支持多种渲染方式（浅渲染、静态渲染、全局渲染）和断言方式（深度匹配、模拟事件触发等）。目前 Enzyme 支持 React 16 版本以上，不支持 React 15 版本以下。
安装 Enzyme
可以使用 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
其中 enzyme-adapter-react-16 是针对 React 16 的适配器，如果使用 React 17，需要安装 enzyme-adapter-react-17。
一个简单的 React 组件
首先，我们创建一个简单的 React 组件 HelloWorld：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------ ---- -- -
------ -
-----
---------- ------------
------- ----------- -- ------------- ----------
----- ---
---------
------
--
-这个组件通过 props 接收一个名字 name，并显示一个标题和一个按钮，点击按钮会弹出一个对话框。
测试组件的渲染
下面，我们来测试这个组件的渲染。在 HelloWorld.test.js 文件中编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ ---------- ---- ---------------
---------------------- -- -- -
---------- ------ --- ----- ------- --- -------- -- -- -
----- ------- - ------------------- ------------ ----
---------------------------------- -------------------------
------------------------------------- --------------------------
---
---这个测试用例使用 shallow 方法进行浅渲染，然后通过 contains 方法查找是否包含相应的元素。运行测试用例，应该会看到测试通过。
测试组件的交互
接下来，我们来测试按钮的交互。在 HelloWorld.test.js 文件中编写以下代码：
-- -------------------- ---- -------
---------------------- -- -- -
---------- ---- -- ----- ---- --- ------ -- --------- -- -- -
----- ------- - ----------------- ------------ ----
------------ - ----------
--------------------------------------------
-----------------------------------------
------------------------------------------------- ---------
---
---这个测试用例使用 mount 方法进行全局渲染，然后模拟按钮点击事件，通过 toHaveBeenCalledWith 方法判断弹出框是否正确弹出。
使用 Jest 和 Enzyme 进行快照测试
除了测试组件的行为，我们还可以使用 Jest 和 Enzyme 进行快照测试，即对组件结构进行截图并进行比对。这种测试方法可以方便地发现界面变化和错误，也可以作为组件文档的一部分。
在 HelloWorld.test.js 文件中编写以下代码：
describe('HelloWorld', () => {
it('should match its snapshot', () => {
const wrapper = shallow(<HelloWorld name="Alice" />);
expect(wrapper).toMatchSnapshot();
});
});这个测试用例使用 toMatchSnapshot 方法对组件进行截图，然后保存在 __snapshots__ 目录下的 HelloWorld.test.js.snap 文件中。如果组件结构发生变化，则快照测试会失败，需要手动更新快照文件。
总结
在本文中，我们介绍了如何使用 Enzyme 工具进行 React 组件单元测试，涵盖了浅渲染、静态渲染、全局渲染以及快照测试。单元测试虽然不是必须的，但可以大大提高代码质量和可维护性，建议开发者在开发过程中随时进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb4e0bf6b2d6eab35e8d4e