LoginSignup
2

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

Last updated at Posted at 2021-12-22

始めに

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 を使うことで、簡単にまとめることができました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2