【Jest モック入門】React Router / Supabase / fetch をテストするテンプレ集

はじめに

React + Supabase で開発するとき、本番の遷移やDBアクセスをテストで実行すると危険です。
そこでよく使うのが モック（偽物関数）です。

ここでは、React Router・Supabase・fetch で使える定番のモックパターンをまとめました。

1. React Router（useNavigate のモック）

// 偽の navigate 関数
const mockNavigate = jest.fn();

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useNavigate: () => mockNavigate,
}));

// テスト例
fireEvent.click(screen.getByText("戻る"));
expect(mockNavigate).toHaveBeenCalledWith("/");

2. Supabase（users テーブル）

jest.mock("../../supabase", () => ({
  supabase: {
    from: jest.fn(() => ({
      select: jest.fn().mockReturnThis(),
      eq: jest.fn().mockReturnThis(),
      single: jest.fn().mockResolvedValue({
        data: { id: "alice", name: "Alice" },
        error: null,
      }),
    })),
  },
}));

// supabase.from("users").select().eq("id","alice").single()
// → 常に Alice を返す

3. fetch API

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ message: "Hello World" }),
  })
) as jest.Mock;

// テスト例
const res = await fetch("/api/hello");
expect(await res.json()).toEqual({ message: "Hello World" });

4. 共通化（mocks フォルダ）

// __mocks__/supabase.ts
export const supabase = {
  from: jest.fn(() => ({
    select: jest.fn().mockReturnThis(),
    eq: jest.fn().mockReturnThis(),
    single: jest.fn().mockResolvedValue({
      data: { id: "alice", name: "Alice" },
      error: null,
    }),
  })),
};

// テスト側
jest.mock("../../supabase");

まとめ

Router → ページ遷移をモック

Supabase → DBアクセスをモック

fetch → APIリクエストをモック

共通化 → mocks にまとめる