在前端开发中，UI组件是不可或缺的一部分。而对于一个复杂的UI组件，我们需要对其进行有效的测试，以确保其质量和性能。这就是为什么快照测试变得越来越流行的原因。
快照测试是通过比较已知输出（快照）和实际输出来测试组件的技术。 这种测试方法可以快速验证前端代码的正确性 ，而且几乎不需要手动干预。
React是一个流行的前端框架，它提供了一系列测试库来测试React组件。其中最流行的是 Enzyme 和 Jest。本文将介绍如何使用 Enzyme 和 Jest 对 React 组件进行快照测试 。
Enzyme 简介
Enzyme是一个流行的React测试工具，它提供了一个易于使用的API来测试React组件的渲染行为和交互特定行为。Enzyme的API很简单并且类似于jQuery，因此它是 React 组件测试中的一个强大解决方案。
Jest 简介
Jest是一个提供了自动测试功能和快照测试功能的JavaScript测试框架。它可以测试Node.js、React 和 Web应用程序。它在快照测试方面颇有优势，因为它允许我们比较字符串快照，并提供了与Enzyme一起使用的渲染工具。
Enzyme 和 Jest 如何实现快照测试
现在我们将深入了解如何使用Enzyme和Jest测试React组件的快照。
首先，我们需要在项目中安装 Enzyme 和 Jest。你可以通过以下命令来安装：
--- ------- ---------- ------ ----
现在，我们将编写一个简单的React组件，并使用Enzyme和Jest对它进行快照测试。下面是代码：
------ ----- ---- -------- ----- ------ - -- ------ ----- ------- -- -- - ------- ----------- ---------------------------------- -- ------ ------- -------
现在，我们将使用Enzyme渲染该组件，然后使用Jest将其生成的HTML字符串与期望的快照进行比较。以下是此过程的代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
----------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - --------
------- ------------ --- ------------- ----------- -- - ------------------- --------- -- --
--
---------------------------------- -- ---------------------------
---
---使用 Jest 的 toMatchSnapshot() 方法，Enzyme 将生成一个包含组件输出的HTML字符串 作为“快照”。这个快照然后储存在项目中的单独文件夹（__snapshots__）。当我们对组件进行任何更改时，我们只需要运行测试，Jest 将自动比较生成的新快照和预期的快照。
在这个示例中，我们检查组件是否按预期输出内容。这个快照也允许我们轻松地检测 UI 工具库的错误和排除方式，成为一个强大的调试工具。此外，该测试频道通常需要一些重复操作，不再需要这种重复操作了。
结论
通过使用Enzyme和Jest测试React组件，我们可以实现快照测试。这种测试方式可以轻松地验证组件输出是否与我们预期的一致，并检测潜在的错误。同时减轻了我们开发过程中需要反复验证输出的负担。如果您对React有足够的掌握，那么快照测试对您对项目的提升将非常显著。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67247ed92e7021665e13bc1b