Mock Service Worker

공식문서를 참고하여 작성했습니다.

MSW란?

Service Worker를 사용하여 네트워크 호출을 가로채는 API mocking 라이브러리.
즉, 브라우저에서 자신이 백엔드 API인 것처럼 동작하면 가짜 데이터를 응답으로 보내준다.

MSW를 통해 충족시켜야 하는 것들

1. 네트워크 call들을 가로채어 특정 응답을 반환한다.
2. 테스팅 동안에는 네트워크 call들을 차단한다.
3. 서버 응답을 사용하여 테스트 컨디션을 만들어준다.

MSW Set up

1. npm install msw
2. handler 생성 => 특정 URL과 라우트에 무엇을 반환할지 결정 하는 함수가 handler이다.
3. 요청을 처리할 test server생성
4. 테스트 하는 동안 테스트 서버가 항상 수신 대기중인지, 호출을 잘 가로채고 있는지 확인 필요

Mocking REST API

프로젝트의 /src/mocks/handler.js안에 필수요소들을 import해준다.

Request handler

REST API를 사용하기 위해서 우리는 method, path, mocked reponse를 반환하는 함수를 특정해주어야 한다.

다음은 기본적인 login flow를 mocking하는 튜토리얼이다. 이번 flow에서는 두가지 request를 다룰것이다.

• POST/login: user가 로그인 하도록 해줌
• GET/user: 로그인 된 유저 정보를 반환해줌.

Response Resolver

request를 가로채어 응답하기 위해서 우리는 response resolver function을 사용하는 mocked response가 필요하다.

`Response resolver는 다음과 같은 arguments를 받는 함수이다.

• req: request에 대한 정보
• res: mocked response를 생성하는 functional utility
• ctx: mocked response의 status code, headers, body...등을 설정하는데 도움을 주는 함수의 그룹