在 React 前端开发的过程中，单元测试是一个极其重要的环节。使用单元测试可以帮助开发者提高代码的质量、降低出错概率、减少排错时间，让代码更加可维护。本文介绍如何使用 Enzyme 生成快照测试。
Enzyme 是什么？
Enzyme 是一个 React 测试工具库，由 Airbnb 开源，可以帮助我们快速方便的测试 React 组件的行为和输出。主要功能有：
- 浅渲染组件，可以测试组件的不同状态及事件。
- 完全渲染组件，测试全部子组件的渲染结果。
- 生成快照，测试组件输出的 HTML 结构是否正确。
安装 Enzyme
使用 Enzyme 前需要先安装它。可以通过 npm 安装，命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme-adapter-react-16 是针对 React 16 版本的适配器。如果你使用的是 React 15 或早期版本，则应该安装对应的适配器。
配置 Enzyme
安装完成后，还需要在测试代码中配置 Enzyme。考虑到 Enzyme 是针对 React 的测试工具，我们需要在测试文件的头部引入 React 的相关模块。示例代码如下：
import React from 'react';
import Enzyme, { shallow, render, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });其中，shallow 方法将会返回一个浅渲染的组件实例，render 方法将会返回一个测试版的 HTML 结构，mount 方法将会返回一个完全渲染的组件实例。
生成快照测试
利用 Enzyme 可以方便地生成组件的渲染快照。快照是一个包含组件输出 HTML 结构的字符串，使用快照测试可以避免手动对比组件实际输出的 HTML 结构。如果组件的输出结构发生了改变，快照测试会自动检测出来，并提供详细的对比信息。
下面是一个简单的组件示例，它是一个登录表单组件，由用户名和密码两个输入框和一个登录按钮组成。示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------------------- - --- -- -
----------------------------
--
----- -------------------- - --- -- -
----------------------------
--
----- ----------- - -- -- -
---------------------- ------------ --------- --------------
--
------ -
------
-------
---------
------ ----------- --------------- ---------------- ------------------------------- --
--------
-------
---------
------ --------------- --------------- ---------------- ------------------------------- --
--------
------- ------------- ------------------------------------
-------
--
-
------ ------- ----------我们可以写一个快照测试来验证它的输出结果是否正确。首先，我们需要在测试文件中引入 LoginForm 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- ---------------
--------------------- -- -- -
---------- ----- ---------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---在浅渲染模式下，我们将 LoginForm 组件渲染为一个 ShallowWrapper 对象，并将它与预期生成的快照进行比较，以此验证组件是否正常输出。
执行测试命令后，如果组件的输出结构没有发生改变，测试将通过。如果组件的输出结构发生了改变，则测试将失败，同时在控制台上输出详细的信息，包括改变的内容和旧的快照。此时，开发者需要审查组件的改动，并决定是否需要更新测试用例。
总结
本文介绍了如何使用 Enzyme 生成快照测试，通过快照测试可以避免手动对比组件实际输出的 HTML 结构，提高测试效率和代码质量。Enzyme 作为一款强大的 React 测试工具，在前端开发中具有重要的作用。对于开发者来说，掌握 Enzyme，将对 React 的单元测试有极大的帮助。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a62bb548841e98942b9fcd