【入門編】テストにおけるAPIモック戦略 – React実践ガイド

こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。

Reactを学び始めて、「画面を作るのは楽しいけれど、テストって何から手をつければいいの？」と頭を抱えていませんか？特に「APIからデータをもらって表示する」という機能のテストは、最初の大きな壁ですよね。

今回は、そんなあなたを救う最強の相棒「MSW (Mock Service Worker)」について、難しい技術の話を抜きにして、身近な例えを交えながらお話しします。

—

そもそも、なぜAPIのテストで困るの？

想像してみてください。あなたは今、「注文したら料理が出てくるカフェのシステム」を作っているとします。

Reactのテストをするということは、「注文ボタンを押したら、ちゃんと料理が出てくるか？」を確認することです。でも、もし毎回本物のキッチン（本物のAPIサーバー）に注文を出していたらどうでしょう？

キッチンが混んでいたらテストが遅くなる。
うっかり注文を出しすぎて、データがめちゃくちゃになる。
そもそも、キッチンが開店前だとテストができない。

これでは困りますよね。そこで登場するのが「影武者」です。

—

MSWは「完璧な影武者」

MSWは、ネットワークの通信を横取りして、まるで本物のサーバーからの返事であるかのように、あらかじめ用意しておいた「完璧な回答」を差し出す魔法のツールです。

テストの世界では、これを「モック（Mock）」と呼びます。MSWのすごいところは、あなたのReactアプリが「え、今サーバーと通信したよね？」と疑う隙すら与えないほど、自然に振る舞うところ。コードの書き方を変える必要もありません。

準備はたったの3ステップ！

難しい設定は一旦忘れて、イメージをつかんでください。

1. 「何を聞かれたら、何を返すか」を決める（ハンドラー）
2. 影武者を待機させる（サーバーのセットアップ）
3. テストを実行する（ブラウザやテスト環境で確認）

—

コードで見てみよう

まずは、MSWがどのように「影武者」を雇っているのか、簡単なコードで見てみましょう。

// src/mocks/handlers.js
import { http, HttpResponse } from ‘msw’;

// サーバーに「ユーザーリストをください」と言われた時の台本です
export const handlers = [
http.get(‘/api/users’, () => {
// サーバーが忙しくても、ここですぐに準備したデータを返します
return HttpResponse.json([
{ id: 1, name: ‘太郎くん’ },
{ id: 2, name: ‘花子さん’ }
]);
}),
];

どうですか？「もし `/api/users` にアクセスがあったら、このJSONを返してね」と書くだけ。これが「台本」です。

あとは、テストコードの中でこの影武者を動かすだけです。

// src/__tests__/UserList.test.js
import { render, screen } from ‘@testing-library/react’;
import UserList from ‘../UserList’;

test(‘ユーザーリストが正しく表示されること’, async () => {
render();

// 影武者が即座にデータを返すので、画面にはすぐに名前が表示されます
const user1 = await screen.findByText(‘太郎くん’);
const user2 = await screen.findByText(‘花子さん’);

expect(user1).toBeInTheDocument();
expect(user2).toBeInTheDocument();
});

—

つまずきやすいポイントへの「お守り」

初めてこの環境を作るとき、きっといくつか壁にぶつかるはずです。でも、大丈夫。みんな通る道です。

「テストが通らない！」と思ったら：

ほとんどの場合、URLの打ち間違いか、ハンドラーが正しく読み込まれていないことが原因です。まずは `console.log` を仕込んで、MSWがちゃんとリクエストをキャッチできているか確認してみてください。

「本物のAPIと混ぜて使いたい…」：

実はMSWは、特定のURLだけモックして、それ以外は本物のサーバーに通信を通すこともできます。まずは「全部モックする」ところから始めて、慣れてきたら少しずつ応用していけばいいんです。

—

最後に：完璧主義を捨てよう

プロの現場でも、最初から完璧なテストを書く人はいません。まずは「ボタンを押したらデータが出てくる」という一番シンプルな動きを、MSWという影武者に任せてみてください。

テストは、あなたのコードを縛る鎖ではなく、「安心して新しいコードを書くための防具」です。

MSWを使えば、ネットワークの不安定さやサーバーの都合に振り回されず、自分のペースで開発を楽しめます。焦らず、一歩ずつ進んでいきましょう。もしまたつまずいたら、いつでもここに戻ってきてくださいね。応援しています！