React 组件中的事件处理是前端开发中的重要部分。然而，测试这些事件处理程序可以是一项挑战。Enzyme 是一个流行的 React 测试工具，它可以帮助我们轻松地测试组件中的事件处理程序。在本文中，我们将介绍如何使用 Enzyme 测试 React 组件中的事件。
Enzyme 简介
Enzyme 是由 Airbnb 开发的一个 React 测试工具。它提供了一组用于测试 React 组件的实用程序，包括渲染、模拟事件以及轻松地查找组件。Enzyme 可以与各种测试框架一起使用，包括 Jest、Mocha 和 Jasmine。
安装 Enzyme
首先，我们需要安装 Enzyme。可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
我们还需要为 React 16 安装适配器：
// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将配置 Enzyme 以与 React 16 一起使用。
测试事件处理程序
现在，我们将创建一个简单的 React 组件，并测试它的 click 事件处理程序。首先，我们创建一个名为 Button 的组件：
// src/Button.js
import React from 'react';
const Button = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
export default Button;这个组件接受一个 onClick 属性和一个 children 属性。当用户单击按钮时，将调用 onClick 函数。
接下来，我们将创建一个测试文件 Button.test.js。我们将使用 Enzyme 的 shallow 函数来渲染 Button 组件，并模拟点击事件。然后，我们将使用 Jest 断言来验证事件是否被正确调用。
-- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
--------- ------- ---- ---- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------------- -------------
-----------------------------------------
---------------------------------------
---
---在这个测试中，我们模拟了一个点击事件，并验证了 onClick 函数是否被调用。我们使用了 Jest 的 fn() 函数来创建一个模拟函数，并使用 Enzyme 的 shallow 函数来渲染组件。
使用 find 查找元素
在上面的测试中，我们使用了 wrapper.find('button') 来查找按钮元素。Enzyme 的 find 函数可以使用选择器字符串来查找元素。在这个例子中，我们使用了 button 选择器来查找按钮元素。你也可以使用其他选择器，如 input[type="text"]。
使用 simulate 模拟事件
在上面的测试中，我们使用了 wrapper.find('button').simulate('click') 来模拟点击事件。Enzyme 的 simulate 函数可以用于模拟各种事件，如 change、submit 和 keydown。在这个例子中，我们使用了 click 事件。
结论
在这篇文章中，我们介绍了如何使用 Enzyme 测试 React 组件中的事件。我们使用了 Enzyme 的 shallow 函数来渲染组件，并使用 find 函数和 simulate 函数来查找元素和模拟事件。希望这篇文章能帮助你更好地测试 React 组件中的事件处理程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675717d16c1545326306f52a