什么是 Enzyme？
Enzyme 是一个用于 React 应用程序的 JavaScript 测试工具，它提供了一组易于使用的 API，用于测试 React 组件的输出和行为。Enzyme 可以帮助你更轻松地编写可维护的、健壮的单元测试。
安装 Enzyme
你可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
配置 Enzyme
在编写任何测试之前，你需要配置 Enzyme。你需要将 Enzyme 适配器与 React 一起使用。在此示例中，我们将使用 Enzyme 适配器为 React v16。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });编写测试
测试组件渲染
我们将从测试组件渲染开始。假设我们有一个简单的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - -- -- -
------ -
-----
---------- -----------
------- -- -- --------------
------
--
--
------ ------- ------------我们可以使用 Enzyme 的 shallow 方法来测试组件的渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个测试中，我们使用 shallow 方法将组件浅渲染，然后使用 Jest 的 toMatchSnapshot 方法来比较渲染结果。
测试组件属性
下一步，我们将测试组件的属性。假设我们有一个接受 name 属性的组件：
import React from 'react';
const Hello = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
export default Hello;我们可以使用 Enzyme 的 shallow 方法来测试组件属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
----------------- -- -- -
---------- ------ --- ------- ------ -- -- -
----- ------- - -------------- ------------ ----
------------------------------------------------- ---------
---
---在这个测试中，我们使用 shallow 方法将组件浅渲染，然后使用 find 方法找到组件中的 h1 元素，并使用 text 方法获取其文本内容。最后，我们使用 Jest 的 toEqual 方法来比较文本内容。
测试组件事件
最后，我们将测试组件事件。假设我们有一个接受 onClick 属性的组件：
import React from 'react';
const Button = (props) => {
return <button onClick={props.onClick}>Click me!</button>;
};
export default Button;我们可以使用 Enzyme 的 shallow 方法来测试组件事件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ---- ------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---在这个测试中，我们使用 shallow 方法将组件浅渲染，然后使用 find 方法找到组件中的 button 元素，并使用 simulate 方法模拟点击事件。最后，我们使用 Jest 的 toHaveBeenCalled 方法来验证 onClick 方法已被调用。
结论
在本文中，我们介绍了 Enzyme 的基础知识，并演示了如何使用 Enzyme 编写 React 单元测试。我们希望这篇文章能够帮助你更好地理解 Enzyme 的工作方式，并为你编写更健壮的单元测试提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a23ee44e319dee41a9ce6