前言
在前端开发中，测试是非常重要的一环。其中，UI 自动化测试是保证前端页面 UI 一致性和正确性的重要手段之一。其中，视觉测试是 UI 自动化测试的重要维度之一，可以用来保证前端页面的表现与设计保持一致。本文将介绍使用 npm 包 @morgs32/jest-image-snapshot 来进行 Jest 的视觉测试，以便更全面地保证前端代码的质量。
什么是 Jest
Jest 是一个由 Facebook 开源的 JavaScript 测试库，用来编写自动化的测试套件，在前端领域非常流行，可以用来测试 React、Vue、Angular 等前端框架。
什么是 @morgs32/jest-image-snapshot
@morgs32/jest-image-snapshot 是 Jest 的插件之一，它可以用来进行 Jest 的“视觉测试”操作。与传统的 UI 自动化测试不同，视觉测试更多的是关注页面的 UI 表现与设计的一致性和正确性，使前端页面在不同环境和设备下表现一致性和正确性。
安装 @morgs32/jest-image-snapshot
首先，需要您的项目中已经安装了 Jest。如果您的项目中还没有安装过 Jest，请先进行 Jest 的安装。
然后，使用下面的 npm 命令来安装 @morgs32/jest-image-snapshot:
npm i -D @morgs32/jest-image-snapshot
使用 @morgs32/jest-image-snapshot 进行 Jest 的视觉测试
第一步：配置 jest.config.js
首先，需要在 jest.config.js 中配置 jest 的测试文件的输出目录和测试环境。在本文的示例中，我们将 Jest 的测试文件输出目录设置为 __tests__/__image_snapshots__ 目录，测试环境设置为 jsdom。
-- -------------------- ---- -------
-------------- - -
-------- -----
---------------- --------
---------- -----------------------------
-------------------- -
--------------------------------------------
--
------------------- -
----------------------------------------------
--
----------------- -
--------------------------- -----------------------------------
------------------------ ---------------------------------
--
-------- -
--------- --
-
-第二步：编写测试用例 test.js
我们将在测试用例 test.js 中进行 Jest 的视觉测试操作，需要引入 React、ReactDOM、shallow 和 mount。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- ----- - ---- ---------
------ --- ---- --------
------ - -------------------- - ---- -------------------------------
--------------- -------------------- ---
------------- ------ -- -- -
---------- ----- ---------- -- -- -
----- --- - ------------ ----
------------------------------
---
---------- ----- -------- ----- -------- --- -------- -- -- -
----- --- - ---------- ----
----- ------ - -------------------
-------------------------
------------------------------
---
---------- ----- -------- ----- -------- --- ------ -- -- -
----- --- - ---------- ----
----- ----- - ------------------
------------------------ - ------- - ------ ------- ------- - ---
------------------------------
---
---------- ----- -------- ----- -------- --- ------ -- -- -
----- --- - ---------- ----
----- ----- - ------------------
------------------------ - ------- - ------ -- - ---
------------------------------
---
---------- ----- ----- ---------- ----- -- -- -
----- --- - ---------- ----
----- ------ - -------------------
-------------------------
----- ----- - ----- ----------------- --------- ---- ---
-------------------------------------
---
---需要注意的是，在测试用例中，我们使用 Jest 提供的 toMatchSnapshot 方法来生成一个快照，来记录页面的当前 UI 和样式，并和基准快照进行对比。如果它们不一致，测试将失败。
第三步：执行 Jest 的测试
在执行 Jest 的测试前，需要先启动 React 项目。在启动 React 项目的命令前，需要在启动命令前添加：
jest --updateSnapshot
这个命令将更新 Jest 的快照文件。
然后，使用下面的 npm 命令来运行 Jest 的测试：
npm run test
如果一切顺利，您将会看到 Jest 的测试结果。
示例代码
完整的示例代码可以查看我的github：https://github.com/wanqizhu9/JEST_UI_Testing/blob/master/tests/test.js
总结
在前端开发中，视觉测试是非常重要的一环。 @morgs32/jest-image-snapshot 插件为 Jest 提供了视觉测试的支持，可以和 Jest 的自动化测试结合使用，更全面地保证前端代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005757a81e8991b448ea5d7