什么是快照测试?
快照测试是一种测试方法，通常用于检查应用程序是否按预期输出，以及是否可以在不影响应用程序既定行为的情况下进行更改。 在React开发中，快照测试可以帮助我们确保组件的渲染输出保持一致，即使我们进行了更改和更新。
什么是 Enzyme?
Enzyme 是一个 React 组件测试框架，由 airbnb 团队开发。它提供了一组 API 用于指定组件的输入，并解析和渲染结果，以便于我们编写测试用例。 Enzyme 查找组件渲染结果的方式类似于 jQuery，这样我们就可以用相同的选择器方法来检查组件输入和输出。
快照测试的优点
使用快照测试进行代码测试时，您不需要手动维护预期的渲染结果，Enzyme框架将自动执行所有测试，并将其与原始快照进行比较，将差异传递给测试套件，从而弥补我们开发者的疏忽或错误。 可以快速获得反馈，降低测试成本，并减少冒泡故障率。
如何使用 Enzyme 进行快照测试
以下是如何使用 Enzyme 框架进行 React 组件的快照测试的步骤：
步骤1：使用 Enzyme 安装
在运行快照测试之前，我们首先需要在环境中安装 Enzyme 库。
npm install --save-dev enzyme enzyme-adapter-react-16
步骤2：为 Enzyme 配置测试文件
在 React 项目的测试文件中，我们需要首先为 Enzyme 配置适配器才能正常运行。 这是一种将 Enzyme 与 React 框架集成的方式。 故添加存于文件 src / setupTests.js 的以下代码:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });步骤3：运行快照测试
通过使用 Jest 测试运行器，我们可以运行和比较 Enzyme 生成的测试快照。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
---------- ------ --------- ---- -- ------- -- -- -
----- --------- - -------------------- ----
------------------------------------
---
---------- ------ ------ ---- --------- ---- ----- --------- -- -- -
----- ------- - ------- -------
----- --------- - -------------------- ----------------- ----
------------------------------------
---
---第一次运行时 Enzyme 将渲染我们的组件并生成快照。 从第二次开始运行测试时，Enzyme 会生成一个新的快照，并将其与上一次生成的快照进行比较。 如果快照发生变化，则表示我们进行了更改。
通过创建新的快照来保持和检查代码间的一致性是一种很好的途径，因为我们可以确保组件的输出保持一致。
结论
使用Enzyme进行快照测试，可以更容易地确保React组件在更新和维护时保持一致性和正确性。由于使用不需要太多的手动测试和维护，使用快照测试会减轻开发工作的压力，并将重点放在更重要的问题上，因此建议开发者们在代码开发时采用快照测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e76bfe9a7045d0d6a4980