MSW設定手順

全体

src
├── mocks
│   ├── handler.ts
│   └── server.ts
└── pages
    ├── _app.tsx
    └── msw.tsx

mswインストール

yarn add msw --dev

handler.ts作成

mkdir mocks
touch mocks/handlers.ts

handler.tsにモックするリクエストを書く

// mocks/handlers.ts
import { rest } from 'msw';

export const handlers = [
  rest.get('http://localhost:8000/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
        password: 'password',
      }),
    );
  }),
];

server.ts作成

touch mocks/server.ts

// mocks/server.ts
import { setupServer } from 'msw';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

開発環境でMSWを利用

// pages/_app.tsx
import { server } from '../mocks/server.js';
import { useEffect } from 'react';

if (process.env.NODE_ENV === 'development') {
  server.listen();
}

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    return () => {
      if (process.env.NODE_ENV === 'development') {
        server.close();
      }
    };
  }, []);

  return <Component {...pageProps} />;
}

pages以下で適当にページを作って確認してみる

@@ -0,0 +1,30 @@
// pages/index.tsx
import { useEffect, useState } from 'react';
import Loading from '@/components/atoms/Loading/Loading';

interface UserData {
  username: string;
  password: string;
}

export default function HomePage() {
  const [data, setData] = useState<UserData | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch('http://localhost:8000/user')
      .then((response) => {
        return response.json();
      })
      .then((data: UserData) => {
        // console.log(data);
        setData(data);
      })
      .catch((error: Error) => setError(error));
  }, []);

  if (error) return <div>Failed to load user</div>;
  if (!data) return <Loading />;

  return <div>User: {data.username}</div>;
}