MSW 컨벤션

dev 환경에서는 이제 api 요청을 직접 서버에 보내지 않고 service worker에서 가르채서 응답함

끄고 싶으면 콘솔창켜서 끌 수 있음

현재 msw 2버전이 최신버전이지만, 너무 최신버전이고 아직 안정화가 안되었다는 의견이 많아 1버전으로 설치

2버전 공식문서말고 1버전 공식문서로 봐야 함

API 명세서에서 본인이 mocking하고 싶은 API 요청 검색 - URI와 response sample 참고

Ex) 회원 프로필 조회

req, an information about a matching request

res, a functional utility to create the mocked response

ctx, a group of functions that help to set a status code, headers, body, etc. of the mocked response.

msw 가 켜져 있다면, api/v1/users/a 라고 요청을 보내면, statusCode 200 과 함께 ctx.json 안에 정의한 데이터가 응답으로 내려온다

get 말고 post,put 등등도 가능함

실제 서버에 요청보내는게 아님

장점

컴포넌트에서는 아직 API가 완성되지 않았다고 해도 실제 API가 나와있는것처럼 사용할 수 있다(어차피 실 서버에 요청이 가지 않기 때문),

API가 완성되었다고 해도 요청 방식이 바뀌지 않는 이상 컴포넌트에서 따로 수정할 필요가 없음
더 다양한 사용방식은 공식문서 참고하기

다양한 테스팅 라이브러리와 사용할 수 있다

지금 당장 하지 않더라도, 확장성 고려

파일 관리

rest 요청들은 src/mocks/index.ts 의 handlers 배열 안에 들어가 있어야 동작함

모든 rest 요청들을 하나하나 저 배열 안에 넣게 되면 관리가 힘들기 때문에, 요청의 성격별로 파일을 나누어 관리해서, src/mocks/index.ts 에서 import 해서 사용하는 방식으로 사용

최대한 API 폴더의 구조를 따라가기

API 명세서 잘 확인하여 더미 데이터 만들기

1. - src/mocks 폴더 하위에 API 폴더명과 동일하게 폴더를 나눈다 ◦ src/apis/User , ProjectLists ... 등으로 나뉜다면, ◦ src/mocks/User , src/mocks/ProjectLists 로 나눈다

2. 폴더를 생성했다면, 해당 폴더에 index.ts와 mockData.ts(js) 파일 생성하기

`index.ts` - `handlers` 라는 배열을 생성하여 여기에서 rest 요청들을 담는다

현재 폴더명과 동일한 API 폴더에서 다루고 있는 api 요청만 담기!!

Ex) api/User에서 `get '/a' 라는 요청을 다루고 있다면, mocks/User에서 get '/a' 요청을 mocking하는 rest 요청을 생성한다

parameter , query string 등을 이용하는 방법은 공식문서 참고

에러에 관련한 응답도 가능함

`mockData.ts` - `ctx.json` 에 들어갈 dummy data들을 관리하는 곳

이 부분은 API 명세서를 활용하여 자유롭게 작성

3. 정의해놓은 handlers는 `src/mocks/index.ts`의 `handlers` 배열에 넣어주기

여기에 넣지 않으면 작동 안함

배열 그대로 넣는게 아니라 ...handlers 로 넣기


URI - `/api/v1/users/{userId}`
response sample
{
"user_info": {
"nickname": "sehee",
"introduction": "hi~ H~ I~!",
"profile_image_url": "profile_image_url",
"job": "백엔드 개발자",
"career": "0년차",
"github_url": "https://www.naver.com",
"blog_url": "https://www.naver.com",
// 생략
}



import { rest } from 'msw'

rest.get('/api/v1/users/:userId',(req,res,ctx) => {
	//해당 URI로 요청했을 경우 어떤 응답을 내려주고 싶은지를 작성하면 됨
	return res(
		ctx.status(200), - 어떤 status code를 내려줄건지
		ctx.json({ - 어떤 데이터를 내려줄건지
		"user_info": {
		"nickname": "sehee",
		"introduction": "hi~ H~ I~!",
		"profile_image_url": "profile_image_url",
		"job": "백엔드 개발자",
		"career": "0년차",
		"github_url": "https://www.naver.com",
		"blog_url": "https://www.naver.com",
		})
	)
)


src/mocks/User/index.ts

export const UserHandlers = [
	rest.get('/a',(req,res,ctx) => {
		return res(
			ctx.status(200), //반환할 status Code
			ctx.json({
				//반환할 데이터, ./mockData.ts에서 import해서 사용하기
			})
		)
	}),
	
	rest.get('/b',(req,res,ctx) => {
		...
	})

]


src/mocks/index.ts

import userHandlers from ...
import AuthHandlers from ...

const handlers = [..., ...AuthHandlers ,...userHandlers]