React 是前端开发中广泛应用的一种 JavaScript 库，作为一名前端开发工程师，我们需要对 React 前端项目的单元测试有一定的了解。在 React 单元测试中，我们需要使用一些工具来测试组件的正确性。其中，Enzyme 是 React 中最受欢迎的单元测试工具之一。Enzyme 为我们提供了一组简单易用的 API，可以帮助我们编写更简洁、高效和易于维护的测试用例。
Enzyme 简介
Enzyme 是由 Airbnb 开发的一个 React 测试工具，它提供了一系列用于测试 React 组件的实用 API，可以快速进行断言、渲染、模拟事件等测试操作。Enzyme 支持两个 React 渲染器：React Test Renderer 和 React DOM，因此您可以在不需要 DOM 的情况下进行测试。
在使用 Enzyme 进行 React 单元测试时，我们通常会用到其三个常用的 API：shallow、mount、render
shallow：执行浅渲染，只会渲染当前组件，而不会渲染它的子组件。Shallow 渲染快速并且只测试组件本身的行为和状态，因此它是一种很好的测试组件的方式。Shallow 渲染用于测试已渲染的 JSX 内容输出。mount：真实渲染，渲染整个组件及其子组件，测试过程中可以测试组件内部状态的变更，也能简单地验证子组件的行为，非常适用于测试交互式组件。render：静态渲染，返回一个纯 HTML 的表示组件的字符串，用于断言与测试渲染出来的 HTML 是否符合预期。
如何集成 Enzyme
在使用 Enzyme 进行单元测试之前，我们需要先安装它。我们可以使用 npm 或 yarn 来安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme-adapter-react-16 依赖于 React 16+。
然后，在代码中引入 Enzyme 和适当的 React Test Renderer 渲染器，并配置适当的适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
configure({ adapter: new Adapter() });
// 此处是初始化开始的代码这样，我们就可以开始使用 Enzyme 进行单元测试。
Enzyme 的常用测试 API
在测试中，我们常使用的 Enzyme API 有：find、simulate、text、props、state、hasClass 等。
下面将对这些 API 进行详细介绍。
find(selector)
find 方法允许您通过选择器查找组件中的 DOM 元素或其他组件。它返回一个新的包含匹配元素的 wrapper，可供进一步测试。
const wrapper = shallow(
<MyComponent>
<span>Some text</span>
</MyComponent>
);
const spanWrapper = wrapper.find('span');上面的示例查找 <MyComponent> 组件包装的 DOM 结构中的 span 元素，并返回包装 span 元素的 wrapper。
simulate(event[, args])
simulate 方法允许您模拟某个事件。它接收一个事件名称作为第一个参数，可选其他事件参数可以用于具有 preventDefault() 方法的事件（例如 submit 和浏览器提供的事件）。
const wrapper = mount(
<MyComponent>
<button className="my-button">Click me</button>
</MyComponent>
);
wrapper.find('.my-button').simulate('click');上面的示例模拟 click 事件并模拟单击 button。
text([options])
text 方法返回包装器中的所有文本节点的值，并将它们连成一个字符串。
-- -------------------- ---- -------
----- ------- - --------
-------------
---------- -----------
---------- -----------
--------------
--
----- --------- - ----------------------------
------------------------------- -------- -------上面的示例查找 <MyComponent> 组件包装的 DOM 结构中的 span 元素，并返回连接它们的文本值。
props()
props 方法返回当前包装器表示的 React 元素的属性对象。
const wrapper = shallow(<MyComponent id="my-id" />);
const props = wrapper.props();
expect(props).toEqual({ id: 'my-id' });上面的示例通过 props 方法获取 MyComponent 的属性，以进行进一步的测试。
state([key])
state 方法返回当前包装器表示的 React 元素上的状态值。如果指定了一个键，它将返回当前包装器表示的组件的特定状态值。
-- -------------------- ---- ------- ----- ------- - ------------------ ---- --- ----- - ---------------- ----------------------- ------ -- --- ---------------------------------------- - ------- - ------ ---- ------ - --- ----- - ---------------- ----------------------- ------ ---- ------ ---
上面的示例获取 <MyComponent> 的状态，并在模拟 change 事件后获取新状态。
hasClass(className)
hasClass 方法接收一个类名字符串并返回一个布尔值，指示包装元素是否具有该类。
const wrapper = shallow(<MyComponent className="my-class" />);
expect(wrapper.hasClass('my-class')).toEqual(true);
expect(wrapper.hasClass('new-class')).toEqual(false);上面的示例检查 <MyComponent> 元素是否具有 my-class 类，并验证其结果。
示例
接下来，我们来用在 React 中进行单元测试时如何使用 Enzyme 的示例。
下面是一份 React 组件代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--
----------------- - -----------------------------
-
------------------- -
--------------- ------ ------------------ ---
-
-------- -
------ -
-----
------ ----------- ------------------------ ---------------------------- --
------- ------------------------- ------------------------------
------
---------
------
--
-
-
------ ------- ------------现在，我们可以使用 Enzyme 编写单元测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ------ ----- -- ----- -------- -- -- -
----- ------- - -------------------- ----
---------------------------------------- - ------- - ------ ---- ------ - ---
------------------------------------------ --------
---
---------- ---- -------- ---- -- ------ ------ ------- -- -- -
----- ------------ - ----------
----- ------- - -------------------- ----------------------- ----
-------------------------------------------------
----------------------------------------
---
---上面的代码中，我们测试组件的 handleChange 方法是否会更新组件的状态，以及 onSubmit 方法是否会在单击提交按钮时调用。
很多开发者在进行 React 单元测试时会选择 Jest 作为测试框架，它是 Facebook 公司开发的一个开源的 JavaScript 测试框架，Enzyme 与 Jest 集成非常完美。
结论
以上就是使用 Enzyme 进行 React 单元测试的详细介绍。了解 Enzyme 可以帮助您更快、更精准地编写 React 组件测试，提高测试效率，也能帮助您减少代码中的错误。
单元测试是我们在开发过程中必不可少的一部分，尤其是在大型项目中，它不仅让我们了解代码是否按预期工作，也让我们更加信心地进行更全面的提取请求。
希望通过这篇文章，您能够了解 Enzyme 如何为 React 单元测试提供更好的测试体验，帮助您写出更高质量的代码，更加有效地保护您的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b88919babaf620fac4331