在前端开发中，测试是非常重要的一部分，它可以帮助我们发现代码中的问题，从而减少错误和不必要的开支。而在测试过程中，测试截图也是非常有用的一种方式，可以通过比较截图来了解页面的变化，并进行测试结果的分析。本文将会介绍如何在 Jest 中测试截图。
安装依赖
首先，需要安装两个依赖：jest-puppeteer 和 pixelmatch。
jest-puppeteer 是一个 Jest 插件，它能让你在测试过程中使用 Puppeteer。pixelmatch 是一个像素比较工具，它可以比较两张图片的相似程度。
安装命令如下：
npm i jest-puppeteer pixelmatch --save-dev
准备测试文件
在 Jest 中，测试文件通常包含两个部分：测试环境的设置和测试用例。创建一个新的测试文件 example.test.js，并在文件中引入依赖：
const jestPuppeteer = require("jest-puppeteer");
const { allowInsecurePrototypeAccess } = require("@handlebars/allow-prototype-access");
const Handlebars = require("handlebars");
const pixelmatch = require("pixelmatch");
const fs = require("fs");
const path = require("path");接下来，设置 Jest 的环境变量，用于控制 Puppeteer 的启动选项。
-- -------------------- ---- -------
----------------- ------ -- -- -
-----------------------
--- --------
--- -----
--------------- -- -- -
------- - ----- ------------------
--------- -----
----- -----------------
--------------- ---------------------- -- -----
------------------ -----
---
---- - ----- ------------------
----- -------------------------------------
---
-------------- -- -- -
----- ----------------
---在这个例子中，我们设置了 browser 和 page，并在 beforeAll() 函数中启动了 Puppeteer，并在 afterAll() 函数中关闭了 Puppeteer。
测试截图
现在我们已经准备好了测试环境，接下来就可以开始测试截图了。
在这里，我们将使用 Handlebars 来生成页面的 HTML。在测试之前，首先需要编写 Handlebars 的模板文件，模板文件可以根据实际情况来编写，这里就不作详细介绍了。
假设我们已经有了一个 example.hbs 的模板文件，我们可以使用 Handlebars.compile() 方法来编译它，并将数据传递给模板。然后，将生成的 HTML 内容写入到文件中。这个过程的代码如下：
-- -------------------- ---- -------
---------------- ------ ----- -- -- -
----- ----------- - ---
----- -------- - ------------------------------------------------------- --------------- ---------
----- ---- - ----------------------
------------------------------------- ---------------- ----- --------
----- ------------------- - -------------------- -----------------
----- ---------- - ----- ------------------
----- ------------------ - ------------------------------------ ---------------------------
----- ---- - --- ----- ------ ----------------- ------- ----------------- ---
----- --------- - -----------
------------------------
----------------
----------
-----------------
------------------
- ---------- --- -
--
-----------------------------------
---这里的测试代码会生成一张屏幕截图，并和预期的截图进行比较，如果两张截图的差异很小，就说明测试通过了。
总结
本文介绍了如何在 Jest 中测试截图。首先，需要安装 jest-puppeteer 和 pixelmatch 两个依赖。然后在测试文件中编写测试环境的启动代码，之后编写测试截图的代码，并使用 fs 和 path 两个模块来读写文件。这个方法可以帮助我们在开发中更好地发现页面的变化，从而更好地保证代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f0746968c7c53b0124740