Enzyme 是 React 测试工具包，它可以帮助我们在编写 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
安装 Enzyme 后，需要配置它才能正常工作。在项目中创建一个 setupTests.js 文件，在该文件中进行 Enzyme 的配置。
// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });注意，在使用 Typescript 时需要安装 @types/enzyme 和 @types/enzyme-adapter-react-16。安装完成后，在 tsconfig.json 中配置 Enzyme：
{
"compilerOptions": {
"types": ["jest", "enzyme", "enzyme-adapter-react-16"]
}
}测试事件处理
接下来，我们将编写一个 React 组件，然后使用 Enzyme 对它的事件处理进行测试。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
-------- --------------------------- ------------------------------------ -
--------------------------------
-
-------- --------------------------- ------------------------------------ -
--------------------------------
-
-------- ------------------- --------------------------------- -
-----------------------
-- ----- ------ --- ----
-
------ -
----- ------------------------
-----
------ ------------------------------------
------ ----------- ------------- ---------------- ------------------------------- --
------
-----
------ ------------------------------------
------ --------------- ------------- ---------------- ------------------------------- --
------
------- -----------------------------
-------
--
-这是一个简单的登陆表单，它有两个输入框和一个提交按钮。我们将使用 Enzyme 对提交按钮的点击事件进行测试。编写测试代码如下：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
--------- ------------ ---- --- ------ ------ -- --------- -- -- -
----- ------------ - ----------
----- ------- - ---------------- ----------------------- ----
----- ------ - --------------------------------------
-------------------------
----------------------------------------------
---
---我们使用 mount 方法将 LoginForm 组件渲染到 DOM 中。然后，查找提交按钮并模拟 click 事件。最后，我们断言 handleSubmit 函数被调用了一次。
现在，我们可以运行测试了：
$ yarn test
如果测试通过，我们应该看到类似于以下的输出：
PASS src/LoginForm.test.tsx
LoginForm
✓ calls handleSubmit when the submit button is clicked (121 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total总结
使用 Enzyme 对 React 事件处理进行测试非常简单。我们只需编写一个组件，然后创建一个测试文件，并使用 Enzyme 渲染组件并模拟事件。这为我们编写高质量的 React 组件提供了保证。
完整代码和示例可以在 Github 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e888980a9b385b9c7a90