3. MSW

MSW(Mock Service Worker)

• 서비스 워커를 사용하여 네트워크 호출을 가로채는 API 모킹 라이브러리

• 백엔드 API인척 프론트엔드의 요청에 가짜 데이터를 응답해줌

• 백엔드 구현이 완료되기 이전에 임시로 사용하기 위한 가짜 API를 만들거나, 테스트 실행시 실제 백엔드 API에 네트워크 호출을 하는 대신에 가짜 API를 사용할 수 있음

서비스워커(Service Worker)

• 브라우저로부터 나가는 요청이나 들어오는 응답을 중간에서 감시하거나 변조, 캐싱과 같은 기존에 웹에서 할 수 없었던 부가적인 작업들을 할 수 있음

Polyfill

• 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는데 필요한 코드

• 이전 node에는 window.fetch()가 없어서 폴리필 설치하여 사용

예제

핸들러 작성

• msw 모듈의 rest 객체 사용

• Express와 유사한 방식으로 핸들러 구현

import { rest } from 'msw';

const BASE_URL = 'http://localhost:3000';

const handlers = [
  rest.get(`${BASE_URL}/products`, (req, res, ctx) => {
    const products = [
      {
        category: 'Fruits', price: '$1', stocked: true, name: 'Apple',
      },
    ];

    return res(
      ctx.status(200),
      ctx.json({ products }),
      );
    }),
  ];

export default handlers;

테스트

import { rest } from 'msw';

const BASE_URL = 'http://localhost:3000';

const handlers = [
  rest.get(`${BASE_URL}/products`, (req, res, ctx) => {
    const products = [
      {
        category: 'Fruits', price: '$1', stocked: true, name: 'Apple',
      },
    ];

    return res(
      ctx.status(200),
      ctx.json({ products }),
      );
    }),
  ];

export default handlers;