[JavaScript]MSW 라이브러리 (version : 2.6.9)

JavaScript

[JavaScript]MSW 라이브러리 (version : 2.6.9)

hans-j 2024. 12. 16. 22:20

msw 라이브러리란?

Mock Service Worker(MSW)는 API 요청을 가로채고 가짜(Mock) 응답을 반환하여 프론트엔드 애플리케이션의 테스트 및 개발을 단순화하는 도구.
기존의 Mocking 방식과는 달리, MSW는 브라우저의 Service Worker API를 활용하여
네트워크 요청을 중간에서 가로채기 때문에, 실제 네트워크 요청과 거의 동일한 방식으로 작동.따라서, 테스트 환경뿐만 아니라 개발 환경에서도 실제 API가 준비되지 않은 상황에서
프론트엔드 개발을 진행할 수 있도록 도와준다.

내가 쓰게 된 경우는 실제 API가 완성되지 않은 상태에서,

실제 반환값, 에러 테스트 케이스를 모두 시뮬레이션 해보고자 사용함.

MSW을 적용한 개발 환경 : Typescript, Vite, React

사용방법

1. MSW 설치

npm install msw --save-dev

2. MSW Worker 설정

mockServiceWorker.js 파일을 프로젝트에 추가하려면 MSW에서 제공하는 msw 패키지의 worker.js가 필요함

npx msw init public/ --save

3. handlers.js파일 설정

4. Intergrate (적용하기)

해당 단계는 개발 환경에 따라 코드가 약간씩 다르다.

Vite

환경변수에서 development상태 일때만 해당 라이브러리가 실행되도록 설정.

onHandledRequest는 설정은 MSW가 정의되지 않은 네트워크 요청을 받았을 때 , 어떻게 처리하는지 설정하는 옵션.

warn, baypass, error 세가지 중 하나로 설정 할 수 있다.

warn : 콘솔에 경고 메세지 출력
bypass: 실제 API네트워크 요청으로 넘김 ( 실제 API와 함께 사용하는 경우 유용 )
error: 오류 발생으로 처리

5. handler 설정

이 부분은 구 버전과 현재 다루고 있는 업데이트 버전 ( 2.6.5 / 2024.12.16 기준)이 다르기 때문에

가장 중요한 부분 이라고 볼 수 있음.

구 버전에서는

import { rest } from "msw";

const fackUserName = {userName : "홍길동", userId:"testId1"};

export const handlers = [
  rest.get("/user", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(fackUserName));
  }),

이런식으로 사용했지만 업데이트 된 버전은 아래와 같다.

import { http, HttpResponse, passthrough } from 'msw';

const fackUserData = {userName : "홍길동", userId:"testId1"};

http.get('/user', () => {
    return HttpResponse.json(fackUserData)
}),

실 사용 예제