MSW

MSW(Mock Service Worker)

애플리케이션에서 서버 API 호출을 Mocking(가짜로 구현)할 때 사용되는 자바스크립트 라이브러리

오프라인 작업등을 지원하기 위한 서비스 워커의 기능을 유용히 활용한 것

서버 응답을 가짜 데이터로 대체하여 서버 의존성 없이 코드를 테스트하거나 개발할 수 있다.

npm i -D msw

Service Worker

브라우저에서 메인 스레드와 별도로 실행되는 자바스크립트 파일

일반적으로 네트워크 프록시 같은 역할이나 백그라운드 작업, 캐싱, 오프라인을 처리하는데 사용된다.

Worker

웹 브라우에서 동작하는 자바스크립트 코드는 브라우저의 메인스레드에서 실행된다.

웹에서 제공하는 Worker를 사용하면 백그라운드에서 별도의 스레드를 사용하여 메인 스레드를 가로막지 않고 스크립트를 실행할 수 있다.

메인 스레드를 non-blocking 하기 때문에 비싼 연산을 worker 에서 실행하면 사용자 경험이 좋아진다.

Window 와 Document 에 접근할 수 없다.

프록시(Proxy)란?

클라이언트와 서버 사이에서 중계 역할을 수행하는 서버

네트워크 프록시란 네트워크 환경에서 인터넷 접속을 제어하고 중계 역할을 하는 서버를 의미한다.

Service Worker가 제공하는 기능

• 백그라운드에서 실행되는 독립적인 스레드

• 네트워크 요청 가로채기 (프록시 역할)

• 캐시 저장소 제어

• 푸시 알림 제공

• 백그라운드 동기화 작업 수행

• 오프라인 상황에서도 작동 가능한 오프라인 기능 제공

MSW 환경 세팅하기

src/mocks/

server.ts

mock server를 구성할 파일

import { setupServer } from 'msw/node';

import handlers from './handlers';

const server = setupServer(...handlers);

export default server;

handler.ts

사용할 api 스펙을 작성하는 곳

간단하게 테스트 및 목 데이터로서 사용할 정도로만 개발하자. 너무 치중하면 백엔드를 개발하는 것이니 매몰되지말자

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;

MSW with Jest

src/setupTests.ts

import server from './mocks/server';
// 테스트 전 목킹한 msw 서버와 연결
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
// 각 테스트 후 다른 테스트에 영향을 미치지 않기 위해 연결된 핸들러 초기화
afterEach(() => server.resetHandlers());
// 모든 테스트 완료 후 연결 끊기
afterAll(() => server.close());

jest.config.js 파일의 setupFilesAfterEnv 속성에 setupTests.ts 파일 추가

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
    '<rootDir>/src/setupTests.ts', // <-- 추가
  ],
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc/jest', {
      jsc: {
        parser: {
          syntax: 'typescript',
          jsx: true,
          decorators: true,
        },
        transform: {
          react: {
            runtime: 'automatic',
          },
        },
      },
    }],
  },
};

Testing with MSW

MSW로 서버 API 의존성을 대체하여 테스팅이 가능하다. Jest가 제공하는 mock 안써도 됨

ReferenceError: fetch is not defined

사용 중인 Node의 버전이 낮을 경우, fetch API를 지원하지 않아서 msw를 사용할 때 ReferenceError: fetch is not defined 에러가 발생한다.

이 경우에 polyfill(폴리필)을 사용해서 해결해야 한다.

fetch polyfill

npm i -D whatwg-fetch

해당 폴리필을 사용하는 곳에서 import 'whatwg-fetch' 를 명시해주어야 한다.

msw를 사용하는 모든 곳에서 필요하기 때문에 setupTests.ts 에 명시해주자

// src/setupTest.ts
import 'whatwg-fetch';
 
import server from './mocks/server';

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));

afterAll(() => server.close());

afterEach(() => server.resetHandlers());

polyfill(폴리필)

새로운 기능이 추가된 최신 자바스크립트 버전을 구형 브라우저 & 노드 환경에서도 지원할 수 있도록 도와주는 코드조각이다.

특정 환경의 자바스크립트 엔진이 최신 자바스크립트 문법을 지원하지 않을 때 사용된다.

가장 대표적으로 ES6에 추가된 Promise 는 ie11 같은 구형 브라우저에선 지원하지 않아 폴리필을 사용해야 한다.