モジュールと API 呼び出しのモック
jest.mock() で ES モジュールをモックし、MSW(Mock Service Worker)で fetch をスタブ化し、実際のネットワーク呼び出しなしに外部データへ依存するコンポーネントをテストします。
「モジュールと 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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Jest のセットアップと基本テスト
- @testing-library/react:render と userEvent
- @testing-library/vue:コンポーネントのマウント
- モジュールと API 呼び出しのモック