在进行前端开发时，UI 测试是至关重要的一部分，它可以确保我们的 React 组件在不同场景下的渲染效果和交互逻辑都得到正确的处理。而 Enzyme 是 React 组件测试中一个十分优秀的工具库，它可以帮助我们轻松地对 React 组件进行测试以及模拟用户行为，本文将介绍如何使用 Enzyme 进行 React 组件的 UI 测试。
Enzyme 简介
Enzyme 是由 Airbnb 开发并维护的一个 React 组件测试工具库。它提供了一套友好的 API 操作 React 组件，可以轻松地进行单元测试、集成测试和验收测试等多种类型的测试。Enzyme 支持所有的 React 版本，包括 React 16，同时它也支持了 React Native。
在 Enzyme 中，有三种常用的 API 可供使用，分别为：
- Shallow rendering：只渲染当前组件，不渲染其子组件，主要用于单元测试；
- Full DOM rendering：渲染所有子组件，包括 DOM 元素，主要用于集成测试；
- Static rendering：渲染组件到 HTML 静态字符串，主要用于服务器渲染。
在本文中，我们主要介绍如何使用 shallow rendering 和 full DOM rendering 进行 React 组件的 UI 测试。
安装 Enzyme
在开始使用 Enzyme 进行 React 组件测试之前，我们需要先安装 Enzyme 库。通过 npm 可以非常方便地安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是针对 React 16 版本的适配器，如果你使用的是其他版本的 React，则需要安装相应版本的适配器。
使用 shallow rendering 进行 UI 测试
在开始使用 shallow rendering 进行 React 组件测试前，我们需要先导入 Enzyme 和适配器以及需要进行测试的 React 组件，具体代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
-- -----
------------------ -------- --- --------- ---
------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这段代码中，我们首先导入了 React 和 Enzyme 相关库以及我们需要进行测试的 MyComponent 组件，而后使用 shallow 方法来渲染组件，最后通过断言判断测试结果是否符合预期。
其中 Enzyme.configure({ adapter: new Adapter() }); 可以让 Enzyme 使用适配器，这里指的是 React 16 的适配器。实际上，只要是与 React 版本匹配的适配器都可以使用。Enzyme 提供了多个适配器，你可以根据需要进行选择。在上面的代码中，我们使用 shallow 方法进行渲染，它只渲染当前组件，并不渲染子组件。
同时，我们可以通过 jest 和 enzyme-to-json 插件来生成组件的快照，具体代码如下：
npm install --save-dev enzyme-to-json
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------ ------ ---- -----------------
-- -----
------------------ -------- --- --------- ---
------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
---
---运行测试后，生成的快照文件会保存在 snapshots 目录下。可以通过编辑器的 Jest 插件来查看快照文件内容是否正确。
如果你不需要使用快照测试，也可以直接判断渲染出来的组件是否符合预期，例如：
describe('My Component', () => {
it('should render correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('h1').text()).toEqual('Hello World');
});
});在这个测试用例中，我们首先使用 shallow 渲染 MyComponent 组件，之后通过 find 方法找到 h1 元素，并判断它的文本内容是否为 'Hello World'。
使用 full DOM rendering 进行 UI 测试
如果我们需要测试的组件涉及到子组件的渲染和交互等，那么就需要使用 full DOM rendering 进行测试。
在使用 full DOM rendering 进行 React 组件测试时，我们需要导入的是 mount 方法而不是 shallow 方法。mount 方法会渲染整个组件树，包括子组件和 DOM 元素。
例如，我们要测试一个包含 Input 和 Button 两个子组件的组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
-- -----
------------------ -------- --- --------- ---
------------ ----------- -- -- -
---------- ------ ----- ----- ---- -------- -------- -- -- -
----- ------- - ------------------ ----
----- ----- - ----------------------
----- ------ - -----------------------
-------------------------
------------------------------------------
---
---在这段代码中，我们首先使用 mount 方法获取组件的包装器对象，之后通过 find 方法来找到 input 和 button 元素，最后通过 simulate 方法模拟按钮点击事件。通常情况下，我们可以通过修改 DOM 元素上的属性和状态，来模拟用户的操作。
总结
Enzyme 是一个方便易用、功能丰富的 React 组件测试工具库，使用它可以帮助我们轻松地进行 React 组件的 UI 测试。在本文中，我们介绍了如何使用 shallow rendering 和 full DOM rendering 进行 React 组件的 UI 测试，希望这些内容对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b544980a9b385b9a7085