この記事の対象読者
- API完成前に画面を作る人
- エラー時や0件時の画面を手元で確認したい人
- モックを使ったフロントエンド開発に興味がある人
本題に入る前に
フロントエンドを作っていると、「APIがまだできていないけど画面を進めたい」という場面があります。
また、APIができていても、エラー時、0件時、権限なし、通信失敗のような状態は、毎回本物の環境で再現するのが面倒です。
でも、こういう状態こそ画面で確認したいんですよね。成功時だけきれいでも、失敗時に何も出ないと問い合わせにつながります。
この記事では、MSWを使ってAPIレスポンスをモックし、成功・0件・エラーの画面を手元で確認する考え方を紹介します。
モックは雑な代用品ではない
モックというと「本物がない間の仮置き」に見えるかもしれません。
でも実務では、次のような確認にかなり便利です。
| 確認したい状態 | 本物のAPIで大変な理由 |
|---|---|
| 0件 | データを消す必要がある |
| 500エラー | わざと障害を起こしにくい |
| 権限なし | ユーザー設定が必要 |
| 遅いレスポンス | ネットワーク条件に依存する |
モックで状態を作れると、画面の品質を上げやすくなります。
MSWでレスポンスを作る
MSWでは、ブラウザやテスト環境でAPIリクエストを横取りして、指定したレスポンスを返せます。
import { http, HttpResponse } from "msw";
export const handlers = [
http.get("/api/reservations", () => {
return HttpResponse.json([
{ id: "rsv_001", title: "初回相談" },
{ id: "rsv_002", title: "定例ミーティング" },
]);
}),
];
画面側は本物のAPIを呼んでいるつもりで fetch を書けます。
async function fetchReservations() {
const response = await fetch("/api/reservations");
return response.json();
}
失敗パターンも用意する
成功だけでなく、0件やエラーも作ります。
export const emptyHandlers = [
http.get("/api/reservations", () => {
return HttpResponse.json([]);
}),
];
export const errorHandlers = [
http.get("/api/reservations", () => {
return HttpResponse.json(
{ message: "予約一覧を取得できませんでした" },
{ status: 500 },
);
}),
];
これで、画面の状態を切り替えながら確認できます。
Storybookやテストと相性がよい
MSWは、StorybookやTesting Libraryと組み合わせると便利です。
たとえば、予約一覧コンポーネントに対して、成功時、0件時、エラー時の表示をテストできます。
test("エラー時にメッセージを表示する", async () => {
server.use(...errorHandlers);
render(<ReservationList />);
expect(await screen.findByText("予約一覧を取得できませんでした")).toBeInTheDocument();
});
本物のAPIに依存しないので、画面の分岐を落ち着いて確認できます。
まとめ
APIモックは、APIがないときだけの仮置きではありません。
成功、0件、エラー、権限なし、遅延など、業務画面で起きる状態を手元で再現するための道具です。失敗時のUIを作るときほど、モックがあると助かります。