Service Worker を使えない環境では msw v2 の getResponse で fetch をハンドラへ直結してデータ取得コンポーネントを描画する
フロントエンド
テスト
MSW
知識
運用
静的 HTML プレビュー、file プロトコルのページ、CSP でネットワークが遮断されたサンドボックスなど Service Worker を登録できない実行環境では、setupWorker ベースの MSW は使えず、データ取得前提のコンポーネントがスケルトンやエラーのままになる。
msw v2 はハンドラ配列と Request を渡すと解決済み Response(マッチしなければ undefined 相当)を返す getResponse 関数を公開しており、これを使うと Service Worker なしで既存のハンドラ資産をそのまま再利用できる。グローバルの fetch を差し替え、対象 URL パターン(API パスなど)にマッチするリクエストだけ getResponse に通し、応答が得られなければ元の fetch にフォールバックする薄いラッパーを、アプリコードより先に評価されるモジュールとして仕込む。
適用条件と注意点
- 相対パスのリクエストは基準 origin がない環境で URL 解決に失敗するため、ダミー origin で絶対化してから Request を作る。ベース URL を環境変数で組み立てるアプリなら、ダミー origin を注入しておくと堅い。
- ハンドラ間で共有する in-memory ストア(シングルトンのモックデータストア)はページロードごとに初期化される。ストーリー単位・テスト単位で上書きされるハンドラ(story parameters の msw 等)はこの経路では効かず、グローバルハンドラの応答になる点を検証時に織り込む。
- グローバルハンドラに無いエンドポイントは実 fetch に落ちて失敗する。必要なら補完ハンドラを先頭に連結する(先勝ちマッチ)。
検証
対象コンポーネントを実際に単体レンダリングし、ローディング表示のまま止まらずデータが描画されることと、マッチしない外部リクエストが従来どおり素通りすることの両方を確認する。