MSW를 이용한 API 모킹

MSW(Mock Service Workder)란?

MSW(Mock Service Workder)는 서비스 워커(Service Worker)를 이용해서 네트워크 호출을 가로채는 API 모킹 라이브러리

특징

• 네트워크 단에서 모킹이 발생하여 실제 통신과 가장 유사
• REST API, GraphQL API 모킹 지원

사용시기

백엔드 개발과 프론트엔드 개발이 동시에 진행될때, 백엔드 API가 구현될때까지 기다리는것이 아닌 가짜 API를 만들어서 임시로 테스트 할 수 있다.

설치

1. MSW 라이브러리 설치

npm install msw

2. Mock Handler 정의

src/mocks 폴더 생성 후 handler 파일을 만들어 API를 모킹

import { rest } from 'msw';
export const handlers = [
  rest.get('/test', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        message: 'msw 모킹 테스트입니다',
      }),
    );
  }),
];

3. MSW 설정

Client-side에서 MSW를 사용하려면 서비스워커를 등록해야 한다.
코드가 실행되면 public/mockServiceWorkder.js 파일이 생성된다.

npx msw init public/ — save

4. 브라우저 환경, 노드 환경

브라우저 환경에서 실행 될 수 있도록 설정 mocks/browser.ts

import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);

5. main.tsx 설정

develop 환경에서 사용할 수 있도록 작성

if (process.env.NODE_ENV === 'development') {
  worker.start();
}

실행