前言
在前端开发中，我们需要对 UI 组件做测试，而 Enzyme 是一个强大的 React 组件测试工具。Enzyme API 非常简单，易于学习和使用。本文的目的是分享如何正确地配置 Enzyme 工具，以及一些在测试中会遇到的问题。
安装 Enzyme
首先，我们需要在项目中安装 Enzyme。可以使用以下命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
这里我们使用 enzyme-adapter-react-16，因为它是适用于 React 16+ 版本的 Enzyme 适配器。
配置 Enzyme
在创建 Enzyme 实例之前，我们需要先配置适配器。我们可以在配置文件中设置适配器，这样我们就可以在代码中使用默认的 shallow，fullDOM 等方法了。
创建一个 file 在项目根目录下，然后添加以下代码：
// src/setupTests.js import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
在 package.json 文件中添加以下命令：
"test": "react-scripts test --env=jsdom --setupFilesAfterEnv=./src/setupTests.js",
这样就可以在运行测试时自动加载设置文件。
在代码中使用 Enzyme
以下是一个简单的示例，使用了 Enzyme 来测试 React 组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------ --- ---- -------- -------------------------- --- ------------ ------------- ------ -- -- - --- -------- ------------- -- - ------- - ------------ ---- --- ----------- ----------- -- -- - ------------------------------------------------- --------- --- ---展开代码
代码很简单：我们创建了一个浅渲染（shallow）的 App 组件实例，并断言标题是否正确。
错误处理
有时候我们会在测试中遇到一些问题。以下是一些常见的问题和解决方案。
Enzyme 找不到某些 DOM 节点
在测试过程中，您可能会遇到 Enzyme 找不到某些 DOM 节点的情况。要解决这个问题，您可以将组件中的 DOM 节点封装在一个容器中，并在测试中使用该容器。比如：
-- -------------------- ---- ------- -- ----- -------- -- ----- -------- - -------- -- - ---- ---------------------- ------------- -- -- ---- --------------------- ------------------------- ------ -- -- ------------ ----- ------------- - ------------ -- ---------------------- -- -- ---------- ------- --- ------- ---- -- ------ -- -- - --- ---- - -------- --- ------- --- ------- ---- --- ------- - -------- --------------- --------- ----------- -- ---------------- -- --------------------------------------------------- --展开代码
模拟事件
在测试中模拟事件非常常见。在 Enzyme 中模拟事件非常简单，您可以使用模拟器来模拟各种事件。以下是一个例子：
it('should handle click event', () => { let onClick = jest.fn(); let wrapper = shallow(<Button onClick={onClick}>Click me</Button>); wrapper.find('button').simulate('click'); expect(onClick).toHaveBeenCalled(); })
以上就是 Enzyme 的最基本用法和错误处理。希望这篇文章对您有所帮助，能够帮助您更好地理解 Enzyme 工具的配置和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9f4d1306f20b3a686f972
