Introduction

Mocking Service Workwer는 Service Worker API를 통해 실제 요청을 가로채서 API를 mocking할 수 있는 라이브러리이다.

Service Workers는 캐싱을 목적으로 요청을 잡아채는 기능을 갖고 있다. msw는 service workers api를 활용해 네트워크 커뮤니케이션 체인의 최상위층에서 API mocking을 수행한다. 이러한 동작 방식은 서버를 직접 열어 mocking하는 방법에 가장 가깝게 만든다.

Service Workds는 모던 브라우저의 정석적인 API이기 떄문에, msw를 활용하면 추가적인 설정 없이도 서비스를 직접 테스팅할 수 있다.

설치는 아래와 같이 할 수 있다.

npm install msw --save-dev
yarn add msw --dev

Mocking REST API

어떤 요청에 대해 mocking할지를 정의하기 위해서, request handler 함수를 생성한다. 이를 통해 method, URL 그리고 다른 criteria를 기반으로 요청을 잡아챌 수 있다.

mocking API는 src/mocks와 같이 하나의 디렉터리 안에서 관리하는 것이 일반적이다.

Imports

msw에서 rest에 해당하는 mocking 기능들은 rest namespace에 관리되어 있다.

Request Handler

REST API요청에 대응하기 위해서는 요청의 method, path 그리고 요청의 응답을 반환하는 함수를 지정해 주어야 한다. 이 튜토리얼에서는 아래 두 가지의 요청에 대해 다룰 것이다.

• POST /login 유저의 로그인 요청을 수락한다.
• GET /user 로그인된 유저의 정보를 반환한다.

rest[METHOD]형식으로 request handler를 생성할 수 있다.

import { rest } from 'msw'

export const handlers = [
	rest.post('/login', null),
    rest.get('/user', null)
]

Response Resolver

응답에 대해 어떻게 요청할지를 설정하기 위해서 response resolver function를 활용한다.
response resolver는 아래 3가지 인수를 갖는다.

• req 해당하는 요청에 대한 정보
• res mocked 응답을 생성하기 위한 functional utility
• ctx mocked 응답의 상태코드, 헤더, 바디를 설정하기 위한 함수를 제공

Integraton

Set up

msw는 service worker를 통해 동작한다. 하지만, service worker에 대한 설정을 따로 해줄 필요는 없다. 대신에 라이브러리가 제공하는 워커 파일을 복사하면 된다. msw가 제공하는 전용 cli를 통해 해당 작업을 간편하게 수행할 수 있다.

npx msw init <PUBLIC_DIR> --save

CRA를 사용하는 경우에는 아래 명령어를 사용하면 된다.

npx msw init public/ --save

Configure worker

/mocks 안에 Service Worker를 설정하고 실행할 파일 하나를 만들어 보자.

$ touch src/mocks/browser.js

browser.js 파일 안에서 앞서 정의했던 request handler들을 가지고 worker instance를 생성할 것이다.

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

Start worker

우리가 정의한 mock API를 사용하기 위해서는 application code안에 import해 주어야 한다.

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import { worker } from "./mock/browser";

worker.start();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

프론트 서버를 실행시키고 콘솔을 확인하면 msw가 실행 중임을 알 수 있다.