jest.mockは1つのモジュールに対して1度だけ使用する

はじめに

現在React×TypeScriptでアプリをつくりながら学習を進めています。
Jestでテストを書いていて苦戦したことがあるので、簡単にまとめます。

問題

うまくモジュール化ができず、テストが通らない。。
モック化については説明を割愛します。下記を参照してください。

解決方法

1つのモジュールに対して複数回モックを定義してはいけないみたいです。

もし仮に複数回jest.mock を使用した場合、後の jest.mock によって前の jest.mock によるモック設定が上書きされてしまう可能性があります。
その結果、モックが適切に適用されなくなってしまうのです。

×NG例
"react-router-dom"というモジュールに対してjest.mockが2回使用されています。
これだとうまく動かないので、1つにまとめてあげましょう。

test.tsx

// useParamsモック
jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useParams: () => ({ loginID: "test" }),
}));

// Navigatorモック
const mockedNavigator = jest.fn();
jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useNavigate: () => mockedNavigator,
}));

OK例
コードの量も減ってすっきりしました。

test.tsx

const mockedNavigator = jest.fn();
jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  // Navigatorモック
  useNavigate: () => mockedNavigator,
  // useParamsモック
  useParams: () => ({ loginID: "test" }),
}));

おわりに

この事象についてChatGPTに尋ねると、「jest.mock を一度だけ使用してモックを設定する必要があるという原則に関する公式ドキュメントはありませんが、これは一般的なベストプラクティスとして広く受け入れられています。」 と言われました。。そうだったんですね。。
もし同じようにも困っている方がいたらこの記事が救いになればと思います。