在现代 Web 开发中，React 已经成为了非常常用的一种技术，以其高效的性能和易于维护的组件化架构，使得我们能够更加轻松地开发出复杂的前端应用。不过开发好的组件也需要进行测试，毕竟前端业务的复杂度正在不断提高，我们需要保证各种情况下的正确性和稳定性。而 Enzyme 是 React 的一个测试库，它能够帮助我们在组件化开发中进行更加有效和精准的测试。
Enzyme 的基本用法
Enzyme 是由 Airbnb 前端团队开发的 React 测试库，使用它进行组件测试非常方便，它提供了类似于 jQuery 的链式调用形式，使得我们能够非常方便地进行单元测试、组件测试、集成测试等多种测试。首先，我们需要使用 npm 或者 yarn 安装 Enzyme：
npm install enzyme --save-dev
然后就可以在我们的测试文件中使用 Enzyme 来对 React 组件进行测试。例如，假设我们编写了一个计数器组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------- -
------ -
------- ----------- -- --------------- ------ ---------------- - - ----
------------------
---------
--
-
-现在我们想要对这个组件进行测试。首先我们需要引入 Enzyme：
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后，我们就可以使用 shallow 方法来对该组件进行测试：
it('renders correctly', () => {
const wrapper = shallow(<Counter />);
expect(wrapper).toMatchSnapshot();
});上述代码以 Jest 测试框架为例，使用 shallow 方法对 <Counter> 组件进行测试，判断是否与预期 snapshot 相符。
Enzyme 测试的注意事项
Enzyme 和 Jest 配置
使用 Enzyme 进行 React 组件测试需要进行 Jest 配置。在项目根目录下新建 jest.config.js 文件，并进行相应配置：
-- -------------------- ---- -------
-------------- - -
----------- -----
------------------ -----------
--------------------- ------ ------ ----- -------
----------------- -
----------- -------------------
--
------------------- -----------------------------
---------------- --------
---------- -
--------------------------------------------
------------------------------------------
--
---------- -
------------------------- -------------
--
------------------------ ----------------------------
-------- -----
--在 setupFilesAfterEnv 中引入 Enzyme：
// tests/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });在测试代码中引入 Enzyme：
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });Enzyme 的选择器
和 jQuery 类似，Enzyme 也提供了选择器的概念，可以通过选择器来选取组件进行测试。Enzyme 支持以下三种选择器：
shallow：浅渲染组件，不渲染其子组件。mount：完整渲染组件，包括其子组件。render：渲染静态 HTML，产生一个正常的 HTML 字符串。
在实际开发中，我们推荐使用 shallow 和 mount，因为它们能不同程度地模拟测试环境，更为接近实际业务的场景。
Enzyme 的匹配器
在测试时，Enzyme 与 Jest 配合使用，我们可以使用 Jest 的断言函数来进行测试。这种方式可以让我们进行更加精准和灵活的测试。Enzyme library 提供了如下的匹配器：
toBe: 精确匹配，使用===运算符。toEqual: 深度匹配，会检查对象的所有属性和子属性是否相等。toHaveLength: 匹配长度，检查 length 属性。toHaveBeenCalled: 检查某个函数是否被调用过。toHaveBeenCalledWith: 检查某个函数是否被给定的参数调用过。toHaveProperty: 检查对象是否拥有某个特定的属性。toMatchSnapshot: 检测是否与之前的快照相匹配。
使用这些匹配器，我们就能够高效地进行组件测试。
示例代码
下面是一个使用 Enzyme 测试 React 应用的完整示例代码：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------- -
------ -
------- ----------- -- --------------- ------ ---------------- - - ----
------------------
---------
--
-
-
-- ---------------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- -----------------
------------------ -------- --- --------- ---
----------------- ----------- -- -- -
----------- ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- -------- --- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
---------------------------------------
------------------------------------------------
---
---------- ---- ----- - -- --------- -- -- -
----- ------- - ---------------- ----
---------------------------------------
---
---在上述代码中，我们通过 shallow 方法来对 <Counter> 组件进行测试，包括组件的渲染、点击事件和默认值等测试。我们使用 Jest 的 toMatchSnapshot 匹配器验证了组件的 snapshot 是否与预期相符合。
结语
在现代前端开发中，测试已经成为了不可或缺的环节。Enzyme 是一个非常优秀的测试库，能够有效地帮助我们进行 React 组件的测试工作。本文介绍了 Enzyme 的基本用法以及注意事项，并提供了一个完整的测试代码示例。希望读者能够在实际开发中，通过本文的学习，更加熟练地使用 Enzyme 进行 React 组件测试。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67972a83504e4ea9bde33bd2