随着前端开发的不断发展，我们需要处理越来越多的 CSS 样式、HTML 重构、以及自动化测试等问题。为此，我们需要使用一些工具来帮助我们完成这些任务，npm 毫无疑问是我们日常开发中必不可少的工具。
reg-suit-core 是一个基于截图的前端可视化测试工具，可以让我们在开发过程中自动化地进行前端界面测试。在本文中，我们将介绍如何使用 reg-suit-core，并讨论其深度和学习意义。
安装
首先，我们需要在命令行中安装 reg-suit-core：
npm install reg-suit-core --save-dev
然后，我们需要创建一个 reg-suit.config.js 文件来配置 reg-suit-core：
module.exports = {
baseBranch: "master",
compareBranch: "develop",
reporters: ["github-pr-check"],
ignore: ["*.DS_Store", "node_modules/**/*"],
testCommand: "npm run test",
approveWhenNoChanges: false
};这是一个示例配置文件，它指定了一个主分支为 master，对比分支为 develop，使用 github-pr-check 作为测试报告工具，忽略 *.DS_Store 和 node_modules 目录下的所有文件，使用 npm run test 命令进行测试，且当没有变更时不会自动批准合并请求。
入门
接下来，我们需要创建一些测试用例。在这里，我们将使用 Jest 来进行测试：
describe("Test Component", () => {
it("renders correctly", async () => {
// your test code
const screenshot = await reg.post("test");
expect(screenshot).toMatchImageSnapshot();
});
});在测试用例中，我们需要调用 reg-suit-core 的一个方法，post。这个方法会自动地比较当前的截图和之前生成的截图，如果存在差异，就会生成一个 diff 截图并将其上载到指定的位置。
此外，我们还需要添加一个 Jest 的配置文件，jest.config.js：
module.exports = {
preset: "jest-puppeteer",
testMatch: ["**/test/**/*.js"]
};这里，我们选择了 jest-puppeteer 作为 Jest 的预设工具，同时指定了测试文件的位置。
进阶
reg-suit-core 并不仅仅局限于截图对比，它还提供了一些高级特性。例如，我们可以使用已有的截图来生成一个比较结果：
-- -------------------- ---- -------
----- ------ - --- ------
----- ------------- - ----- ------ -- -
----- ---------- - ----- ------------------
---------------- ------------
--
-------------- ----------- -- -- -
--------------- -- -- -
----- ------------------
---
---------------- -- -- -
----- -----------------------------------
---
----------- ----------- ----- -- -- -
----- ----------------------
-- ---- ---- ----
---
-------------- -- -- -
----- ------------
-------
----------- ----------
-------------- -----------------
---
---
---在这个例子中，我们使用了一个 Map 来存储不同的截图，然后上传到指定的位置进行对比。
另一个重要的特性是插件系统。在 reg-suit-core 中，插件可以帮助我们自定义截图对比逻辑、扩展截图对比的控制选项，以及为测试结果添加额外的信息等等。
总结
在本文中，我们讨论了如何使用 reg-suit-core 来进行前端界面测试，包括安装、配置以及使用示例。我们还介绍了 reg-suit-core 的深度和学习意义，以及它的高级特性和插件系统。
通过使用 reg-suit-core，我们可以更加方便地进行前端测试，并且能够提升我们的开发效率和代码质量。如果你还没有使用过 reg-suit-core，不妨尝试一下，相信你一定会喜欢上它的便捷和实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70789