Frontend Academy · レッスン

モジュールと API 呼び出しのモック

jest.mock() で ES モジュールをモックし、MSW(Mock Service Worker)で fetch をスタブ化し、実際のネットワーク呼び出しなしに外部データへ依存するコンポーネントをテストします。

レッスン 4/412 ステップ

「モジュールと API 呼び出しのモック」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

モックを使う理由

ユニットテストは分離されている必要があります。実際のAPI呼び出しは遅く、不安定で、コストもかかります。モックを使うと、依存関係を制御可能なテストダブルに置き換え、予測可能なレスポンスを返せます。

jest.mock() — モジュール全体をモックする

jest.mock('module-path')は、モジュール全体を自動モックされたバージョンに置き換えます。すべてのエクスポートがjest.fn()のスタブになります。戻り値を設定するには、mockReturnValueまたはmockResolvedValueを呼び出します。

jest.mock('./api');
import { fetchUser } from './api';

(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });

test('renders user name', async () => {
  render(<Profile userId="1" />);
  await screen.findByText('Alice');
  expect(fetchUser).toHaveBeenCalledWith('1');
});

jest.fn() — 手動スタブ

jest.fn()は、呼び出しを追跡および制御できるモック関数を作成します。コールバックpropsやサービスの依存関係に便利です。

const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);

await user.click(screen.getByRole('button', { name: /submit/i }));

expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });

beforeEachでのモックリセット

状態が漏れ出すのを防ぐため、テスト間でモックをリセットします。beforeEachでjest.clearAllMocks()を使用します。

beforeEach(() => {
  jest.clearAllMocks(); // reset call counts and implementations
});

afterAll(() => {
  jest.restoreAllMocks(); // restore original implementations
});

MSW — Mock Service Worker

MSWは、Service Worker(ブラウザ)またはNode.jsのインターセプター(テスト)を使い、ネットワーク層で実際のfetch/XHR呼び出しをインターセプトします。偽のレスポンスを返すリクエストハンドラーを記述します。

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

テストごとのMSWオーバーライド

特定のテストシナリオでは、デフォルトのハンドラーを上書きします。

test('handles server error', async () => {
  server.use(
    http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
  );

  render(<UserList />);
  await screen.findByText(/server error/i);
});

localStorageのモック化

localStorageを使用するテストでは、jest.spyOnを使ってWeb Storageのメソッドをモックします。

beforeEach(() => {
  const store: Record<string, string> = {};
  jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
  jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});

タイマーのモック化

jest.useFakeTimers()は、setTimeout/setIntervalをJestが制御するバージョンに置き換えます。jest.runAllTimers()は、すべてのタイマーを早送りで実行します。

jest.useFakeTimers();

test('shows toast for 3 seconds', () => {
  render(<Toast message="Saved!" />);
  expect(screen.getByText('Saved!')).toBeInTheDocument();

  jest.advanceTimersByTime(3000);
  expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});

afterEach(() => jest.useRealTimers());

モジュールファクトリパターン

TypeScriptでは、モックするモジュールファクトリが適切な型を返します。

jest.mock('./services/auth', () => ({
  login: jest.fn().mockResolvedValue({ token: 'test-token' }),
  logout: jest.fn()
}));

スナップショットテスト — 使用は控えめに

スナップショットテストは、コンポーネントの出力をシリアライズした表現として保存し、変更されると失敗します。作成は簡単ですが、ノイズの多い誤検知が発生することがあります。安定した純粋なプレゼンテーションコンポーネントにのみ使用してください。

クイックチェック

APIのモックにおいて、jest.mock('fetch')よりもMSWを使う主な利点は何ですか?

まとめ: モック化

jest.mock()はモジュールを置き換えます。jest.fn()は追跡可能なスタブを作成します。beforeEachでモックをリセットしてください。MSWはネットワークレベルでHTTPをインターセプトするため、最も現実に近いモック化の方法です。エラーのシナリオには、テストごとにserver.use()で上書きします。時間に依存するコードにはフェイクタイマーを使用します。コンポーネントの統合テストには、MSWを優先してください。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163

よくある質問

「モジュールと API 呼び出しのモック」レッスンは無料ですか?

はい。「モジュールと API 呼び出しのモック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「モジュールと API 呼び出しのモック」で何を学びますか?

jest.mock() で ES モジュールをモックし、MSW(Mock Service Worker)で fetch をスタブ化し、実際のネットワーク呼び出しなしに外部データへ依存するコンポーネントをテストします。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「モジュールと API 呼び出しのモック」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか?

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Jest のセットアップと基本テスト
  2. @testing-library/react:render と userEvent
  3. @testing-library/vue:コンポーネントのマウント
  4. モジュールと API 呼び出しのモック
← Frontend Academyに戻る