MSW 정의 및 기본 세팅 방법

목차

 

Mocking의 정의

Mocking은 테스트를 독립시키기 위해 의존성을 개발자가 컨트롤하고 검사할 수 있는 오브젝트로 변환하는 테크닉

쉽게 말해서

테스트 코드를 작성하다보면 가끔 실제로 작성할 수 없는 코드들을 마주하게 되는데,(API실제 호출, 결제 등)

이런 외부 API를 테스트 코드에서 호출하게 되면 실제로 API가 작동해버릴 수 있다.

이럴 때, 이런 코드들을 테스트해보려고할 때 그 해결책이 Mocking이다.

 

 

MSW의 정의

MSW(Mock Service Worker의 약자, https://mswjs.io)는 API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 한다. 따라서, Mock Service Worker(MSW) 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있다. 

 

 

MSW의 필요 이유

예상한 기간보다 API 개발에 시간이 더 필요해진 경우, 그 시간만큼 프론트엔드 개발자가 개발을 진행하지 못하는 상황이 생겨난다. 따라서  API가 개발 되기 전에 프론트엔드 개발을 마치기 위해 필요하다고 볼 수 있다.

 

 

세팅 방법

 

msw의 패키지 설치

yarn add msw --dev

 

MSW전용 CLI를 사용하기 위한 명령어

npx msw init <PUBLIC_DIR>

 

실행 시 /mockServiceWorker.js 파일이 생긴다.

 

 

브라우저에서 실행할 경우

// src/mocks/browser.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

 

index.jsx파일

// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
 
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
 
  const { worker } = await import('./mocks/browser')
 
  // `worker.start()` returns a Promise that resolves
  // once the Service Worker is up and ready to intercept requests.
  return worker.start()
}
 
enableMocking().then(() => {
  ReactDOM.render(<App />, rootElement)
})

서비스 워커 등록은 비동기적이기 때문에 mocking을 기다려주어야 한다.

 

 

 

작동이 올바르게 된다면 이런식으로 콘솔에 띄어진다.

 

 

참고

https://tech.kakao.com/2021/09/29/mocking-fe/

Mocking으로 생산성까지 챙기는 FE 개발