Jest のSnapshotTest で生成されるファイルのディレクトリ構成をいい感じに変更する

始めに

Next.js のボイラーテンプレートで Jest を使うと、SnapshotTest が設定されているものをちらほら見かけます。
それに乗っかってページを増やしていって、SnapshotTest を行うようにテストコードを書いていたときに、少し気になることがありました。

テスト実行後のディレクトリ(説明に不要なものは省略)

├── __tests__
│   ├── __snapshots__
│   │   └── snapshot.js.snap
│   ├── pages // Snapshot がそれぞれに生成される...
│   │   ├── __snapshots__
│   │   │   └── index.test.jsx.snap
│   │   ├── index.test.jsx
│   │   └── users
│   │       ├── __snapshots__
│   │       │   └── index.test.jsx.snap
│   │       └── index.test.jsx
│   ├── snapshot.js
│   └── snapshot.js.snap
├── jest.config.js
├── jest.setup.js
├── jsconfig.json
├── package.json
├── pages
│   ├── _app.js
│   ├── index.js
│   └── users // 追加したディレクトリ
│       └── index.js
└── yarn.lock

なんというか、ディレクトリ構成が少し見づらいなと感じました。

• __snapshots__ がそれぞれに作られて、バラバラに.snap ファイルが置かれている

file-system based なnext.js、snapshot のファイルもrouting のようにまとめたいと思い、どうすればできるのかをTips としてまとめました。

環境

• ベースリポジトリはこちら
  • ボイラーテンプレートを利用してプロジェクトを作って、pages配下に ページファイルを追加しています。

どうやるか

Jest のsnapshotResolver のオプションを設定します。
こちらでスナップショットファイルのパスを設定できるようになります。

• スナップショットファイルパスの設定ファイルの追加

snapshotResolver.js

module.exports = {
  resolveSnapshotPath: (testPath, snapshotExtension) =>
    testPath.replace("__tests__/pages", "__tests__/__snapshots__") + snapshotExtension,

  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath.replace("__tests__/", "").replace(snapshotExtension, ""),

  testPathForConsistencyCheck: "test/pages/example.test.tsx"
}

__tests__/pages 配下に書かれたsnapshot テストのファイルの保存先を__tests__/snapshots__ 配下にするように設定しています。
testPathforConsistencyCheck はテスト実行前にパスの解決が正しくされるかの整合性チェックのために必要になります。

• Jest の設定ファイルにsnapshotResolver を設定する

jest.config.js

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  // こちらを追加
  snapshotResolver: "./snapshotResolver.js",
}

module.exports = createJestConfig(customJestConfig)

その後テストを実行すると下記のようになります。

修正後のテスト実行後のディレクトリ

├── __tests__
│   ├── __snapshots__
│   │   ├── index.test.jsx.snap
│   │   ├── snapshot.js.snap
│   │   └── users
│   │       └── index.test.jsx.snap
│   ├── pages
│   │   ├── index.test.jsx
│   │   └── users
│   │       └── index.test.jsx
│   ├── snapshot.js
│   └── snapshot.js.snap
├── jest.config.js
├── jest.setup.js
├── package.json
├── pages
│   ├── _app.js
│   ├── index.js
│   ├── index.module.css
│   └── users
│       ├── [userId].js
│       └── index.js
├── snapshotResolver.js
└── yarn.lock

__tests__/__snapshots__配下にまとまりました。なんとなくスッキリした気がするので満足です。

snapshotResolver を使うことで、簡単にまとめることができました。