在前端开发中，测试是至关重要的。React 作为一种流行的前端框架，也需要进行测试。Enzyme 是一个流行的 React 测试工具，它提供了一系列 API，可以方便地测试 React 组件的行为和状态。本文将介绍 Enzyme 的基本使用方法和一些常见的测试技巧。
安装 Enzyme
要使用 Enzyme 进行测试，首先需要安装它。可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是 Enzyme 的 React 16 适配器，需要根据自己的 React 版本选择相应的适配器。
测试组件的渲染
Enzyme 提供了三个渲染器来测试组件的渲染：shallow、mount 和 render。它们之间的区别在于渲染的深度和性能。
shallow 是浅渲染，只渲染组件本身，不渲染子组件。这种渲染方式适合测试组件的行为和状态。例如，下面是一个简单的组件：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;可以使用 shallow 渲染器测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
----------- - ---------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------- ---------
---
---上面的代码中，shallow 渲染了一个 Greeting 组件，并查找了一个 h1 元素，验证了它的文本内容是否为 'Hello, World!'。
mount 是完全渲染，渲染组件及其所有子组件。这种渲染方式适合测试组件的交互和生命周期方法。但是，由于它的性能较差，建议只在必要时使用。例如，下面是一个具有交互的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-
------ ------- --------可以使用 mount 渲染器测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------------ ----
---
---上面的代码中，mount 渲染了一个 Counter 组件，并模拟了一个按钮点击事件，验证了计数器是否增加了。
render 是静态渲染，将组件渲染为 HTML 字符串。这种渲染方式适合测试组件的输出是否正确。例如，下面是一个具有复杂输出的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----------- -
------ -
----
----------------------- ------ -- -
--- -----------------------
---
-----
--
-
------ ------- -----可以使用 render 渲染器测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
----------- - ---- -- ------- -- -- -
----- ----- - --------- --------- ----------
----- ------- - ------------ ------------- ----
----- ---- - -------------------
-----------------------------------------------------
---------------------------------------------------------
---
---上面的代码中，render 渲染了一个 List 组件，并查找了一个 ul 元素和它的子元素，验证了输出是否正确。
测试组件的行为和状态
Enzyme 提供了一系列 API，可以方便地测试组件的行为和状态。下面是一些常用的测试技巧。
查找元素
可以使用 find 方法查找元素。它接受一个选择器，返回一个包含所有匹配元素的 Wrapper 对象。例如，可以查找一个按钮元素：
const button = wrapper.find('button');模拟事件
可以使用 simulate 方法模拟事件。它接受一个事件类型和一个事件对象，触发相应的事件。例如，可以模拟一个按钮点击事件：
button.simulate('click');获取属性和状态
可以使用 props 方法获取组件的属性，使用 state 方法获取组件的状态。它们都返回一个普通的 JavaScript 对象。例如，可以获取一个计数器组件的状态：
const count = wrapper.state('count');修改属性和状态
可以使用 setProps 方法修改组件的属性，使用 setState 方法修改组件的状态。它们都会触发组件的重新渲染。例如，可以修改一个计数器组件的状态：
wrapper.setState({ count: 1 });总结
Enzyme 是一个非常强大的 React 测试工具，可以方便地测试组件的行为和状态。本文介绍了 Enzyme 的基本使用方法和一些常见的测试技巧。希望本文对你学习 Enzyme 和 React 测试有所帮助。
示例代码
下面是本文中提到的所有示例代码的完整代码：
// Greeting.js
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;-- -------------------- ---- -------
-- ----------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
----------- - ---------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------- ---------
---
----- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-
------ ------- ---------- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------------ ----
---
----- -------------------- ---- -------
-- -------
------ ----- ---- --------
-------- ----------- -
------ -
----
----------------------- ------ -- -
--- -----------------------
---
-----
--
-
------ ------- ------- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
----------- - ---- -- ------- -- -- -
----- ----- - --------- --------- ----------
----- ------- - ------------ ------------- ----
----- ---- - -------------------
-----------------------------------------------------
---------------------------------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6551cbdbd2f5e1655db8565d