Enzyme 测试中如何使用 Snapshot
当我们开发一个前端应用程序时，测试是非常重要的一部分。其中使用 Enzyme 库进行组件测试是一个非常流行的选择。Enzyme 允许我们对 React 组件进行浅层或深层次渲染，并提供了一个简单的 API 用于测试组件的属性、状态和行为。
而在 Enzyme 中，Snapshot Testing 是一种非常流行的测试方式，它的作用是自动化测试对于页面视图输出的正确性，确保在代码变更后数据依旧匹配预期。
在本文中，我们将会深入了解 Enzyme 中如何使用 Snapshot Testing 进行组件测试，并且探索这种方式的优势何在。
引导
在开始介绍 Enzyme 中如何使用 Snapshot Testing 之前，我们先来了解一下 Snapshot Testing 是什么。Snapshot Testing 是一种自动化测试方式，它的主要目的是捕获组件的渲染结果，与我们期望的输出进行对比。如果两者相同，则测试通过。如果不同，则测试失败。只有当我们明确的更改了预期输出，才会更新此测试用例。这样可以节省我们手动实时比对数据的成本，提高开发效率。
Enzyme 提供了一个名为 toMatchSnapshot 的测试断言（test assertion），可以将组件的输出与之前的快照进行对比。如果快照未更改，则测试通过。如果捕获的快照与之前不同，则测试失败。这种测试方式非常强大，它可以方便的测试一些复杂或变化的内容，比如异步请求或数据驱动的页面操作。
如何使用 Enzyme 的 Snapshots
下面我们将演示如何在 Enzyme 中使用 Snapshots。
首先，我们需要安装 Enzyme，可以使用以下命令：
npm install --save-dev enzyme
接下来，我们需要安装一个名为 enzyme-adapter-react-16 的适配器，它可以将 Enzyme 与 React 应用程序连接起来：
npm install --save-dev enzyme-adapter-react-16
现在，我们可以设置 Enzyme 以使用 React 16 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });然后，在测试文件中，我们可以开始使用 Snapshot：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---现在，我们已经准备好开始测试了！运行测试后，Enzyme 会将代码的快照与之前的快照进行比较，如果两者相同，则测试通过。否则，测试失败。
如果测试失败，你可以手动检查两者之间的差异，并且决定是更改快照还是更改代码。
Enzyme 测试中 Snapshot 的优势
到目前为止，我们已经知道了如何在 Enzyme 中使用 Snapshot Testing，下面让我们探讨一下为什么要使用它。
减少手动测试：使用 Snapshot Testing 将减少我们手动测试代码的次数。
提高开发效率：快照通常很容易生成，并且与之前的快照进行比较，从而提高了测试的速度和效率。
可维护性高：在代码发生变化时，快照会自动更新，从而保证了测试的可维护性。
可靠性高：快照测试可以自动检测组件的输出，并与之前快照进行比较。如果测试失败，则表示组件的输出已更改。
在开发和维护 React 应用程序时，使用 Enzyme Snapshot Testing 是非常有价值的，可以加强我们对代码的信心并提高开发效率。
总结
在本文中，我们深入了解了 Enzyme Snapshot Testing，展示了如何使用 Enzyme 进行自动化测试，并且探索了使用 Snapshot Testing 的优势。
我们希望通过本文，读者可以更加深入了解 Enzyme 进行组件测试的方法，并且在开发中充分利用测试来保证代码的质量及其可维护性。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c031109e06631ab9ca43de