Enzyme 是一个 JavaScript 测试工具，用于测试 React 组件。通过 Enzyme，我们可以模拟组件的行为和外部因素对组件的影响，并验证组件的正确性。在本篇文章中，我们会通过一个简单的实例来介绍如何使用 Enzyme 测试 React 组件。
安装 Enzyme
首先，我们需要安装 Enzyme。Enzyme 包含了三个核心库：enzyme，enzyme-adapter-react-16，enzyme-to-json。我们通过 npm 安装这三个库：
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json
然后，在测试用例中导入 Enzyme：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---这里我们导入了 Enzyme 的 shallow 方法，用于浅渲染组件。我们还需要导入将 React 16 适配到 Enzyme 的适配器 enzyme-adapter-react-16：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- --------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
----------- -------- --- --------- ---
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---使用 Enzyme 测试 React 组件
有了 Enzyme，我们就可以开始使用它来测试 React 组件了。在本篇文章中，我们以一个简单的 Todo List 组件为例。这个组件包含一个输入框和一个添加按钮，用户可以输入待办事项，然后点击添加按钮将待办事项添加到列表中。
测试组件渲染
首先，我们来测试组件能否正常渲染。我们通过 Enzyme 的 shallow 方法浅渲染组件，然后验证组件渲染出来的 HTML 是否符合预期：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- --------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------
----------- -------- --- --------- ---
-------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
-----------------------------------------
---
---这里我们使用了 Jest 的快照测试，将组件渲染出来的 HTML 与预期的 HTML 进行比较。使用快照测试可以快速捕捉渲染结果的变化，帮助我们检测和调试组件的错误。
测试用户输入
接下来，我们来测试用户输入待办事项的功能。我们首先需要模拟用户输入，在输入框中输入内容，然后验证输入框的 value 是否符合预期：
it('should update input value when typed', () => {
const wrapper = shallow(<TodoList />);
const input = wrapper.find('input');
input.simulate('change', { target: { value: 'hello world' } });
expect(input.prop('value')).toEqual('hello world');
});这里我们利用了 Enzyme 的 find 方法找到了输入框，然后通过 simulate 方法模拟了用户输入，将输入框的 value 改为 'hello world'。最后我们验证输入框的 value 是否等于 'hello world'，如果等于则说明用户输入功能正常。
测试待办事项添加
最后，我们来测试待办事项添加的功能。我们在输入框中输入待办事项，然后点击添加按钮，验证待办事项是否加入到列表中：
it('should add todo item when click add button', () => {
const wrapper = shallow(<TodoList />);
const input = wrapper.find('input');
input.simulate('change', { target: { value: 'hello world' } });
const addButton = wrapper.find('button');
addButton.simulate('click');
expect(wrapper.find('li').text()).toContain('hello world');
});这里我们利用了 Enzyme 的 find 方法找到了添加按钮，然后通过 simulate 方法模拟了用户点击按钮的操作。最后我们验证列表中是否出现了 'hello world' 这个待办事项，如果出现了则说明添加功能正常。
结论
通过本篇文章的实例，我们学习了如何使用 Enzyme 测试 React 组件。我们了解了 Enzyme 的基本用法，掌握了模拟用户操作、快照测试等测试技巧，可以更加自信地编写高质量的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672883782e7021665e208100