MSW

📌 MSW(Mock Service Worker)

✏️ MSW

기존 API 모킹 라이브러리 대비 MSW의 가장 큰 강점은 모킹이 네트워크 단에서 일어나기 때문에 프런트앤드 코드를 실제 백앤드 API와 네트워크 통신하는 것과 크게 다르지 않게 작성할 수 있다는 것입니다. 이 말은 나중에 가짜 API를 실제 API로 대체하는 것이 쉽다는 뜻이며 그만큼 프런트앤드 프로젝트의 개발 생산성이 올라가는 것을 의미합니다.

✏️ MSW 라이브러리 설치

$ npm i -D msw

✏️ 서비스 워커 코드 생성하기

MSW는 브라우저에서 서비스 워커를 통해서 작동하기 때문에 서비스 워커 등록을 위한 기본적인 코드가 필요한데요. 다행히도 서비스 워커에 대해서 잘 몰라도 MSW에서 제공하는 CLI 도구를 사용하면 이 코드를 쉽게 만들어 낼 수 있습니다.

$ npx msw init public/ --save

✏️ 요청 핸들러 작성

가짜 API를 구현하려면 요청이 들어왔을 때 임의의 응답을 해주는 핸들러(handler) 코드를 작성해야합니다.

src/mocks/hander.js

import { rest } from "msw";

const todos = ["먹기", "자기", "놀기"];

export const handlers = [
  // 할일 목록
  rest.get("/todos", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(todos));
  }),

  // 할일 추가
  rest.post("/todos", (req, res, ctx) => {
    todos.push(req.body);
    return res(ctx.status(201));
  }),
];

✏️ 서비스 워커 생성

다음으로 msw 모듈에서 제공하는 setupWorker() 함수를 사용해서 서비스 워커를 생성하겠습니다. 위에서 작성한 요청 핸들러 코드를 불러와서 그대로 setupWorker() 함수의 인자로 넘겨주면 됩니다.

src/mocks/worker.js

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

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

✏️ 서비스 워커 삽입

이제 서비스 워커를 구동하는 코드를 애플리케이션의 진입 시점(entrypoint)에 삽입을 해보겠습니다. 예를 들어, Create React App으로 만든 애플리케이션의 경우, src/index.js 파일을 다음과 같이 수정해주면 됩니다.

src/index.js

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

import App from "./App";

//여기 추가
import { worker } from "./mocks/worker";
if (process.env.NODE_ENV === "development") {
  worker.start();
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

✏️ 서비스 워커 테스트

이제 애플리케이션을 구동 후에 브라우저에서 열면 콘솔에 다음과 같이 모킹이 활성화되었다는 메세지가 출력될 것 입니다.

[MSW] Mocking enabled.

이제 fetch() 함수를 사용해서 정말로 GET /todos에 요청을 보내면 가짜 응답이 오는지 확인해보겠습니다.

fetch("/todos")
  .then((response) => response.json())
  .then((data) => console.log(data));

[MSW] 22:09:24 GET /todos (200 OK)
['먹기', '자기', '놀기']

✏️ 테스트 서버 작성

MSW는 개발에서 뿐만 아니라 테스트에서도 활용할 수 있다고 말씀드렸죠? msw/node 모듈의 setupServer() 함수를 이용하면 간단하게 테스트용 API 서버를 만들 수 있는데요. 위에서 작성한 가짜 응답을 해주는 요청 핸들러를 그대로 재활용하면 됩니다.

src/mocks/server.js

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

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

✏️ 테스트 서버 설정

테스트 실행 전에 가짜 API 서버를 올렸다가 테스트 실행 후에 내릴 수 있도록 Jest 설정을 해줍니다. 예를 들어, Create React App으로 만든 프로젝트에서는 setupTests.js에 다음 코드를 추가해주면 됩니다.

src/setupTests.js

import "@testing-library/jest-dom";
import { server } from "./mocks/server";

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

src/App.test.jax

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

test("renders todos", async () => {
  render(<App />);

  const listitems = await screen.findAllByRole("listitem");
  expect(listitems).toHaveLength(3);

  userEvent.type(screen.getByRole("textbox"), "공부하기");
  userEvent.click(screen.getByRole("button"));

  expect(await screen.findByText("공부하기")).toBeInTheDocument();
});

https://www.daleseo.com/mock-service-worker/