MSW

핵심 개념

Service Worker

브라우저가 백그라운드에서 실행하는 스크립트로, 네트워크 요청을 가로채고 수정할 수 있습니다. MSW는 이를 이용해 실제 네트워크 요청을 중간에서 처리합니다.

Request Handler

특정 HTTP 메서드와 경로 패턴에 매칭되는 요청을 처리하는 함수입니다. 요청이 들어오면 정의된 핸들러가 모의 응답을 생성해 반환합니다.

REST API Handler

http.get, http.post 같은 메서드로 RESTful API 요청을 모킹합니다. 경로 파라미터와 쿼리 스트링을 포함한 다양한 패턴 매칭을 지원합니다.

GraphQL Handler

graphql.query, graphql.mutation으로 GraphQL 요청을 모킹합니다. 오퍼레이션 이름 기반으로 요청을 구분하고 응답을 정의할 수 있습니다.

setupWorker / setupServer

브라우저 환경에서는 setupWorker로 Service Worker를 시작하고, Node.js 테스트 환경에서는 setupServer로 요청 가로채기를 활성화합니다.

기본 REST API 모킹 설정

GET /api/user와 POST /api/login 요청을 가로채서 미리 정의한 JSON 응답을 반환합니다. 실제 fetch나 axios 호출 코드는 전혀 수정하지 않아도 됩니다.

import { http, HttpResponse } from 'msw';
import { setupWorker } from 'msw/browser';

// 요청 핸들러 정의
const handlers = [
  http.get('/api/user', () => {
    return HttpResponse.json({
      id: 1,
      name: '홍길동',
      email: 'hong@example.com'
    });
  }),
  
  http.post('/api/login', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ token: 'mock-token-123' });
  })
];

// 브라우저 환경에서 Service Worker 시작
const worker = setupWorker(...handlers);
worker.start();