ReactでMSWのバージョン2を使ってみた

概要

表題の通り、mswのバージョン2を使ってみた。

この記事を書いた動機

Webに落ちているほとんどの記事がバージョン1についてだったため、使用するのにちょっと戸惑ったから。

まあ、公式ドキュメントを最初に読めば良いだけの話だけなのだが。

Reactで使ってみる

基本は公式ドキュメント通りにやればよろしだが、以下に残しておく。

セットアップ

$ npm install msw --save-dev
$ npx msw init public/ --save

Reactはブラウザーで実行されるため、ブラウザの設定をする。 こうするとブラウザからのリクエストをブラウザ上でインターセプトしてくれる（多分）。 src/mock/browser.ts を作成

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

dev環境でのみモックするように設定

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  return worker.start();
}

const rootElement = document.getElementById("root") as HTMLElement;
const root = createRoot(rootElement);
enableMocking().then(() => {
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
});

ハンドラーを作ってみる

ここがv1との違いかな。rest が http になった。 src/mock/handlers.ts を作成

import { http, HttpResponse } from "msw";

export const handlers = [
    http.get("https://backend.example.com/api/v1/hello", () => {
        return HttpResponse.json(
            {
                message: "Hello, World!", 
                who: "I am msw."
            }
        );
    }),
];

ReactからAPIを叩いてみる

const BASE_URL = 'https://backend.example.com/api/v1';

export const fetchHello = async () => {
  try {
    const response = await fetch(`${BASE_URL}/hello`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching hello', error);
  }
};

export default fetchHello;

これだけ。便利だね。