Zenn
🎯

Jestで特定のテストファイルに共通のセットアップを適用する方法

2023/09/19に公開
Next.js
Test
Jest
tech

はじめに

Jestを使ってテストを行う際、特定のテストファイルに毎回同じセットアップを適用したい場合があります。
この記事では、そのような状況でどのように共通のセットアップを行うかを解説します。

問題の詳細

例として、src/components の下にあるすべてのテストファイルで、next/config のモックを適用したいとします。

〇〇.test.tsx
jest.mock("next/config", () => () => ({
  publicRuntimeConfig: {
    baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
  },
}));

このコードを毎回各テストファイルに書くのは冗長です。

試したこと

一般的な解決策として setupFilesAfterEnv を使用する方法がありますが、これはすべてのテストファイルに適用されてしまいます。
また、jestは特定のテストファイルを指定して適用するデフォルト機能がありませんでした（あった場合は教えていただけると嬉しいです）

解決策

setupFilesAfterEnv に指定したファイル内で、実行中のテストファイルのパスをチェックして条件に基づいてセットアップを行います。

jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./jest.components.setup.ts'],
};
jest.components.setup.ts
const { testPath } = expect.getState();

if (testPath.includes('/src/components')) {
  jest.mock("next/config", () => () => ({
    publicRuntimeConfig: {
      baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
    },
  }));
}

export {}

上記の「expect.getState()」はJestが提供するグローバルオブジェクトを活用しています。
これでテストファイルのパスが期待しているテストファイルと一致していた場合に、実行できるようになります。

まとめ

特定のテストファイルに共通のセットアップを簡単に適用する方法を紹介しました。これによって、テストファイルごとの冗長なセットアップを避けることが可能になります。

参考資料

https://jestjs.io/ja/docs/configuration#setupfilesafterenv-array

Discussion