【MSW】Jest で MSW を使う

Jestで外部APIとのAdapterのテストをしたい

JestでMock化してもよいが、テスト以外でもそのモックを使用したいので以前調べたMSWを使うことにした

uga-box.hatenablog.com

ちょうどそんな時、以下の記事が公開されたので参考にさせてもらった

zenn.dev zenn.dev

まず、プロジェクトのルートに.mockディレクトリをつくりファイルをおいていく

.mock
├── response
│   ├── sucessResponse.json
│   └── errorResponse.json
├── brawser.ts
├── handlers.ts
├── index.ts
└── server.ts

MSWはブラウザだけでなく、サーバーでも動くのでbrawser.tsとserver.tsを用意する

brawser.ts

import { setupWorker } from "msw";
import { handlers } from "./handlers";

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

server.ts

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

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

そしてindex.tsでこれらのモジュールを出し分ける

if (typeof window === "undefined") {
  const { server } = require("./server");
  server.listen();
} else {
  const { worker } = require("./browser");
  worker.start();
}
export {};

handler.tsにはモック化するAPIのエンドポイントとレスポンスを設定する

import { rest } from "msw";
import sucessResponse from "./sucessResponse.json";

export const handlers = [
  rest.get("https://sample/api/list", (_, res, ctx) => {
      return res(
        ctx.json(sucessResponse),
      );
    },
  ),
];

最後にテストは次のように書いた

import { setupServer } from "msw/node";
import { handlers } from "../../../../../.mock/handlers";
import ApiConfig from "../ApiConfig";
import ApiAdapter from "../ApiAdapter";

const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

const config = new ApiConfig({
  hoge,
  fuga,
});

const sut = new ApiAdapter(client, config);

describe("ApiAdapter", () => {
  test("リストを取得する", async () => {
    const actual = await sut.search();
    const expected = {
      status: 200,
      list: [...],
    };
    expect(actual).toMatchObject(expected);
  });
});

とりあえずこれでテストすることができた

他参考

https://zenn.dev/takepepe/articles/msw-driven-development