MSW 적용하기

FE 개발자는 API가 만들어질 때까지 마냥 기다리고 있을 수만은 없다. 그렇기에 MSW를 이용해서 Mock 데이터로 미리 테스트를 할 수 있다. 또한 MSW를 이용해서 테스트 코드도 작성할 수 있다는 장점이 있다. 이번 글은 MSW를 설치하는 방법에 대해 정리해 보겠다. 참고로 이 프로젝트는 처음에 제로초님의 인프런 강의 "Sleact 만들기"에서 사용한 폴더를 그대로 가져와서 시작한 것이라 CRA로 만든 것이 아니다. 그래서 설치 중간에 좀 고난이 있었다.

MSW 공식 사이트

https://mswjs.io/

Mock Service Worker

설치하기

msw 설치

npm install msw --save-dev

우선 npm을 사용하기 때문에 위 명령어로 msw를 설치했다.

mockServiceWorker.js 생성하기

npx msw init public/ --save

CRA로 애플리케이션을 만들었다면 위 명령어로 파일 생성이 가능하다. 

 

-문제점

하지만 우리 프로젝트는 그렇지 않기 때문에 저 명령어로 파일 생성을 해도 에러가 발생했었다.

 

-해결법

우리 프로젝트에는 public 폴더가 없기 때문에 그냥 최상위 경로에 mockServiceWorker.js를 옮기니까 제대로 실행됐다!

mock 폴더 및 파일들 만들기

위 사진처럼 mock 폴더와 browser.ts, handlers.ts를 만들었다.

 

-handlers.ts

import { rest } from "msw";

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

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

handlers.ts 파일은 위와 같이 구성했으며, get 메서드 요청을 구현했다.

• req: 매칭되는 요청에 대한 정보
• res: 모의 응답을 만들 수 있는 유틸리티
• ctx: 모의 응답의 HTTP 상태 코드, 헤더, 바디 등을 만들 수 있는 함수들

-browser.ts

// src/mocks/browser.js
import { setupWorker } from "msw";
import { handlers } from "./handlers";

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);

broswer.ts에서는 setupWorker에 handlers 파일 내용을 불러와 서비스 워커를 생성했다.

서비스 워커 삽입

서비스 워커 실행을 애플리케이션 진입 시점(entrypoint)에 삽입하도록 구현했다.

 

-client.tsx

import { worker } from "@mock/browser";
if (process.env.NODE_ENV === "development") {
  worker.start();
}

우리 프로젝트에서는 client.tsx 파일이 진입 시점이라 이 곳에다 서비스 워커를 삽입했다.

 

-.env

NODE_ENV=development

그리고 .env 파일에 NODE_ENV 변수를 설정해서 관리했다.

실행 확인

잘 실행되는 것을 확인했다.

 

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

또한 이 코드를 실행하면

Mock 데이터들이 잘 찍히는 것을 확인했다.

 

-참고 글

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

MSW로 백엔드 API 모킹하기