随着前端应用程序变得越来越复杂，我们需要更高效的测试方法来确保代码的稳定性和可靠性。其中一种测试方式就是可视化测试，它可以对组件的渲染、布局和交互进行测试。在这篇文章中，我们将介绍如何在 Jest 和 Enzyme 中使用 Snapshot Testing 来实现可视化测试。
什么是 Snapshot Testing
Snapshot Testing 是一种测试方法，可以对组件的渲染结果进行快照比较，如果快照与之前保存的快照不同，则测试失败。快照测试的好处是非常容易编写和维护。它不需要手动编写断言，也不需要关心实际输出的值，只需要比较快照即可。
为什么使用 Jest 和 Enzyme
Jest 是一个由 Facebook 开发的开源测试框架，它用于编写和运行测试。Jest 提供了一个易于使用的 API 来编写测试用例，并且内置了断言库和 Mock 库等工具。
Enzyme 是一个由 Airbnb 开发的 JavaScript 测试工具，它提供了一个 API 来模拟 React 组件的渲染、布局和交互。Enzyme 支持多种渲染方法，并且可以与 Jest 无缝集成。
使用 Jest 和 Enzyme 的好处是它们能够提供一个完整的测试生态系统，可以覆盖 React 组件的各个方面，包括渲染、布局、交互和状态管理等。
安装和配置 Jest 和 Enzyme
首先，我们需要安装 Jest 和 Enzyme：
--- ------- ---------- ---- ------ ----------------------- -------------------
然后，我们需要在 package.json 文件中配置 Jest：
---------- -
------- ------
--
------- -
------------------ -------
--------------------- -
-----------------------------
-
-上面的配置文件告诉 Jest 使用 Node.js 环境运行测试，并在每个测试文件运行之前运行 setupTests.js 文件。
最后，我们需要在 src/setupTests.js 文件中配置 Enzyme：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
上面的代码告诉 Enzyme 使用 React 16 作为适配器。如果你使用的是不同版本的 React，需要相应地更改适配器。
如何使用 Snapshot Testing
现在，我们已经完成了 Jest 和 Enzyme 的安装和配置，接下来我们将展示如何使用 Snapshot Testing。
渲染组件
首先，我们需要渲染一个 React 组件，并将其保存为快照。例如，以下代码使用 Enzyme 渲染了一个简单的 React 组件：
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------------- ---- --------------------
--------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------------ ----
----------------------------------
---
---渲染组件并将其保存为快照只需要一行代码：expect(wrapper).toMatchSnapshot();。
Jest 会将快照保存到 __snapshots__ 目录下，然后在下一次运行测试时与新的快照进行比较。
更新和比较快照
当我们第一次运行测试时，Jest 会生成一个新的快照并将其保存到 __snapshots__ 目录下。下一次运行测试时，Jest 会将新的快照与旧的快照进行比较。
如果新的快照与旧的快照相同，则测试通过。如果不同，则测试失败，并且需要手动检查差异并决定是否更新快照。以下代码演示了如何更新快照：
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------------- ---- --------------------
--------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------------ ----
---------------------------------- -- -------
------------------ ------ ---- ------ ---
---------------------------------- -- -------
---
---上面的代码演示了如何使用 setProps() 方法更改组件的属性，并更新快照。当你第二次运行测试时，Jest 会将新的快照与旧的快照进行比较，如果二者不同，则测试失败。
忽略部分子组件
有时，我们可能希望忽略某些子组件的快照。例如，当子组件是一个带有随机数或时间戳的计数器时，其渲染结果会发生变化，这会导致快照不稳定。
在这种情况下，我们可以使用 enzyme-to-json 库来忽略子组件的快照。以下是如何使用它的示例代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------------- ---- --------------------
------ - ---------------- - ---- -----------------
----------------------------------------------- ----- ------ ----
--------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------------ ----
--------------------------------- ------ ---------------- ---
---
---上面的示例代码演示了如何使用 createSerializer() 方法创建一个快照序列化程序，并创建一个快照，其中 clock 是一个带有 Date 类型的随机数。这个示例中就会忽略 clock 的快照。
忽略样式和动画
有时，我们可能希望忽略组件的样式和动画效果，以便使快照更加稳定。在这种情况下，我们可以使用 jest-styled-components 来忽略组件的样式，使用 jest-transform-css 来忽略动画效果。
先安装这些库：
--- ------- ---------- ---------------------- ------------------
然后，在 Jest 的配置文件中增加以下配置：
-
------------ -
---------------------- -------------
------------- --------------------------------------------
-------------- ------------------------------
------------- -----------------------
---------------------------- -----------------------------------
----------------- -----------------------------
---------------- ------------------------
------------- -------------------------------------------
-------------- -------------------
--
--------------------- -
-------------------------------------------------------------
--
-上面的配置文件告诉 Jest 使用 jest-transform-css 来处理 CSS 文件，并使用 jest-styled-components 来忽略组件的样式。然后在 Enzyme 中使用 mount() 方法渲染组件，并且在测试用例中使用 toMatchSnapshot() 方法保存快照。
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------------- ---- --------------------
------ -------------------------
--------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------------- ----
----------------------------------
---
---使用 jest-styled-components 可以忽略组件的样式，使得快照更加稳定。
总结
在本文中，我们介绍了如何在 Jest 和 Enzyme 中使用 Snapshot Testing 实现可视化测试。我们先介绍了 Snapshot Testing 的概念和其优点，然后演示了如何安装和配置 Jest 和 Enzyme。最后，我们详细说明了如何使用快照测试，并介绍了如何忽略子组件、样式和动画。
Snapshot Testing 是一个非常好的测试方法，可以帮助我们更快地编写和维护测试用例。当你开始使用 Snapshot Testing 时，请记得确保测试覆盖率足够高，并尽可能地涵盖各种可能的测试场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6479defa968c7c53b05cb545