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 結合使用，以便更輕松地對前端項目中的圖像進行測試。