Jest与Jest Image Snapshot结合

Jest 是一个流行的 JavaScript 测试框架，用于编写和管理 JavaScript 代码的测试。而 Jest Image Snapshot 是一个用于比较和管理图像快照的 Jest 插件。当你需要对 React 或 Vue 等前端项目中的图像进行测试时，Jest Image Snapshot 会非常有用。

要将 Jest 与 Jest Image Snapshot 结合使用，请按照以下步骤操作：

1. 安装 Jest 和 Jest Image Snapshot：

   在项目根目录下运行以下命令，以安装 Jest 和 Jest Image Snapshot：

   npm install --save-dev jest jest-image-snapshot
   

2. 配置 Jest：

   在项目根目录下创建一个名为 jest.config.js 的文件，并添加以下内容：

   module.exports = {
     // ...其他配置
     snapshotSerializers: ['jest-image-snapshot/serializer'],
   };
   

3. 编写测试用例：

   在测试文件中（例如 Image.test.js），你可以使用 toMatchImageSnapshot() 方法来测试图像。首先，需要导入 jest-image-snapshot 并设置一些选项：

   import { toMatchImageSnapshot } from 'jest-image-snapshot';
   
   expect.extend({ toMatchImageSnapshot });
   
   // 设置自定义配置（可选）
   const customConfig = {
     customSnapshotsDir: '__image_snapshots__',
     customDiffDir: '__image_diff_output__',
     failureThreshold: 0.03, // 允许的失败比例
     failureThresholdType: 'percent', // 失败比例的计算方式
   };
   

   然后，在测试用例中使用 toMatchImageSnapshot() 方法：

   test('renders correctly', async () => {
     // 获取图像数据（例如，从一个 HTML canvas 或者一个图像 URL 中）
     const imageData = await getImageData();
   
     // 使用 toMatchImageSnapshot() 方法进行测试
     expect(imageData).toMatchImageSnapshot(customConfig);
   });
   

4. 运行测试：

   在项目根目录下运行以下命令，以运行测试：

   npx jest
   

   如果测试通过，Jest Image Snapshot 将在项目中生成一个名为 __image_snapshots__ 的目录，其中包含所有已保存的图像快照。如果测试失败，将在 __image_diff_output__ 目录中生成差异图像。

通过这种方式，你可以将 Jest 与 Jest Image Snapshot 结合使用，以便更轻松地对前端项目中的图像进行测试。