📸

jest-image-snapshotをTypeScriptで使ってみる

2022/02/26に公開

TypeScript

はじめに

この記事では、jest-image-snapshot + TypeScriptを使用したサンプルコードを紹介します。

対象読者

Jestが書ける方
Jestのスナップショットテストを知っている方
Jestで画像比較を簡単に行いたい方

jest-image-snapshotとは

Jestでテスト結果を比較する時に画像データについても比較出来るようにするライブラリです。
expectにtoMatchImageSnapshotが追加され、それを使用することによって画像データの比較を行います。

動作環境

Node.js - 14.x
Yarn - 1.22.x
TypeScript - 4.5.x
Jest - 27.5.x
ts-jest - 27.1.x
jest-image-snapshot - 4.5.x
@types/jest-image-snapshot - 4.3.x

サンプルコード

設定ファイル

test/jest-setup.ts

// @types/jest-image-snapshotをインストールすることによりTypeScriptでもjest-image-snapshotを参照できます。
import { toMatchImageSnapshot } from 'jest-image-snapshot';

// Jestのsetup時にtoMatchImageSnapshotを使用できるようにします。
expect.extend({ toMatchImageSnapshot });

jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'ts'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
  testMatch: ['<rootDir>/test/**/*.+(ts|js)'],
  // 上記のtest/jest-setup.tsをsetupファイルとして設定します。
  setupFilesAfterEnv: ['./test/jest-setup.ts'],
  // jest-setup.tsをテスト対象外にします。
  modulePathIgnorePatterns: ['jest-setup.ts'],
};

テストコード

test/sample.test.ts

describe('image test', () => {
  it('test1.png ok', () => {
    // test/test.pngを読み込む
    const imagePath = path.join(process.cwd(), 'test/test.png');
    const file = fs.readFileSync(imagePath);
    
    // 読み込んだ画像データを比較
    expect(file).toMatchImageSnapshot();
  });
});