Jest图像快照匹配器：一个视觉回归测试工具的指南

黄秋文Ambitious

于 2024-09-07 09:23:13 发布

阅读量411

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00463/article/details/141985860

版权

Jest图像快照匹配器：一个视觉回归测试工具的指南

jest-image-snapshot✨ Jest matcher for image comparisons. Most commonly used for visual regression testing.项目地址:https://gitcode.com/gh_mirrors/jes/jest-image-snapshot

项目简介

jest-image-snapshot 是一个由美国运通开发的Jest匹配器插件，专门用于执行基于像素的图像比较，非常适合进行视觉回归测试。它通过类似Jest快照的方式工作，帮助开发者捕捉和验证应用程序的视觉变化，确保UI在每次迭代中保持一致。

目录结构及介绍

项目的目录结构大致如下：

src: 存放主要的源代码文件，包括核心功能实现。
test: 包含了单元测试和示例，用来保证插件本身的功能正确性。
example: 可能包含了如何使用此插件的实际例子，帮助用户快速上手。
docs: 文档相关资料，可能包含API说明等。
README.md: 主要的项目说明文件，涵盖了安装、使用方法、特性和贡献指南等内容。
package.json: 定义了项目的依赖、脚本命令和其他元数据。

项目的启动文件介绍

虽然jest-image-snapshot自身并不提供直接的“启动”文件（它作为Jest的一个扩展使用），但在用户的项目中，通常会通过配置jest.config.js或命令行参数来激活它的功能。启动或运行测试时，您会在Jest配置中引入该插件，并可能通过npm或yarn脚本调用Jest，如 npm test 或 yarn test。

项目的配置文件介绍

Jest配置（jest.config.js）

为了使用jest-image-snapshot，您需要对您的Jest配置进行扩展，通常涉及以下几个步骤：

安装依赖：首先，通过npm安装jest-image-snapshot作为开发依赖，命令为 npm i --save-dev jest-image-snapshot。
配置Jest：在您的jest.config.js或者jest配置文件中，您可能需要添加自定义匹配器的配置。例如，您可以通过以下方式扩展Jest的expect函数来使用toMatchImageSnapshot。
```
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
```
配置选项：您可以为toMatchImageSnapshot提供配置选项，比如设置阈值以允许一定程度的图像差异不触发失败。这可以在每个测试用例中单独指定，也可以全局配置。
```
// 示例配置全局阈值
const customConfig = {
  threshold: 0.1, // 示例阈值，10%的像素差异不会导致失败
};
const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customConfig,
});
```