mswの設定

RestAPIをMockしてテストを行う

$ yarn add -D msw

$ mkdir src/mocks && touch $_/{handlers.ts,server.ts}

code:test.setup.ts

import "@testing-library/jest-dom";

import { cleanup } from "@testing-library/react";

import { server } from "./src/mocks/server";

beforeAll(() => server.listen());

afterEach(() => {

cleanup();

server.resetHandlers();

});

afterAll(() => server.close());

handlers.ts にリクエストハンドラーを書けば使える

browser側でも使いたい場合

src/mocks/browser.ts を作成する

code:browser.ts

import { setupWorker } from "msw";

import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

本番環境では動かさないためにmain.tsxで分岐させてから起動させる

code:index.tsx

if (import.meta.env.DEV) {

import("./mocks/browser").then(({ worker }) => {

worker.start();

});

}