はじめに
MSW(Mock Service Worker)は、フロントエンド開発やテスト時にモックレスポンスを返すことができるライブラリです。MSWの概要は以下のような記事で説明されているので省略します。
バックエンドが未完成でも、フロントエンドの開発やテストを進められるのが大きな特徴です。
-
本記事のメインの対象読者
- フロントエンド開発者
- リクエストエラー時の動作確認をしたい方
- 効率よく開発環境を整えたい方
結論
次のように全てのリクエストに対してエラーを返すように設定することができます。
export const handlers = [
http.all('*', () => {
return HttpResponse.json({ error: 'Internal Server Error' }, { status: 500 });
}),
];
ドキュメントでの該当箇所はこちら。
補足
本来はhandler関数内にGetやPostなど各種メソッドの処理が定義されるはずなので、↓のように環境変数などで条件分岐を管理すると良いと思います（より良い方法があるかもしれませんが）。
const makeAllRequestsFail:boolean = import.meta.env.VITE_ALL_REQ_FAIL // Viteの場合
export const handlers = makeAllRequestsFail ? [
http.all('*', () => {
return HttpResponse.json({ error: 'Internal Server Error' }, { status: 500 });
}),
] : [
// 本来のモックされたレスポンスを定義
// http.get(...)
// http.post(...)
];
なぜこの記事を書いたか
モックサーバーを別途動かしている場合、オフライン環境やWeb APIサーバーが完全に落ちてしまった状態を再現するのは簡単だと思います（開発者ツールなどの設定↓でオフライン環境を再現できるので）。
一方、mswでレスポンスをモックしていると↑の設定をしても、強制的にレスポンスが帰ってくるためオフライン環境を再現できません。
そのため、コードベースでどうにか手軽に再現したいという動機がありました。
mswは便利で素晴らしいライブラリですが、サーバーからアクセス制限される状況を再現する方法はあまり知られていないように思います（自分調べ）。
その他
- 全てのレスポンスに遅延を付けたい場合
この場合には公式のドキュメント↓に記載されている方法を取ればよいので迷うことは無さそうです。
- テスト時のみ遅延を0にしたい場合
↓の記事を参考にすればよさそうです。