【備忘録】パラメータが絡むページのテストを書く時、パラメータを指定し忘れない事

やりたいこと

以下の処理を実施する画面で、データが表示出来ていることをテストしたい

1. パスパラメータidを取得
2. idを元に表示するデータを取得
3. 画面表示 (取得まではloadingを表示)

詳細

• テスト実施してもloadingを表示したまま(データを取得出来ていない)の状態
  • 原因1：パスパラメータidが未指定の場合、取得処理が走らない実装にしていた
  • 原因2：モックデータでテストする際、パスパラメータidが未指定だった(console.logしたらundifinedだった)

結論

idを渡してあげることでデータを取得し、テストがOKになった

test.spec.tsx

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useParams: () => ({ id: "id11" })
}));

jest.mock("../../utils/supabaseFunction"); // API処理を書いているファイル