msw best practice

• msw v2 를 기반으로 합니다.
• browser 기반입니다. (worker)

handler 구조

기본적인 handlers 구성법

handler array 를 만들고 setupServer 의 args 로 주면된다.

// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  http.get('/user', () => {
    return HttpResponse.json({ name: 'John Maverick' })
  }),
]

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

msw 실행은 worker.start().

// src/index.js
import { worker } from './mocks/browser'
 
worker.start()

handler 가 많을 경우

mocks/
  handlers/
    user.js
    checkout.js
    index.js

handlers 폴더를 만들어 도메인 별로 파일을 구분하고,
폴더의 index 파일에서 handlers 로 export 해주면된다.

// mocks/handlers/user.js
import { http } from 'msw'
 
export const handlers = [
  http.get('/user', getUserResolver),
  http.post('/login', loginResolver),
  http.delete('/user/:userId', deleteUserResolver),
]

// mocks/handlers/index.js
import { handlers as userHandlers } from './user'
import { handlers as checkoutHandlers } from './checkout'
 
export const handlers = [...userHandlers, ...checkoutHandlers]

네트워크 handler 재정의

worker.use()

worker.setup() 이후
worker.use()를 사용하여 handler 를 재정의할수있다.

import { http, HttpResponse } from 'msw'
import { setupWorker } from 'msw/browser'
 
const worker = setupWorker(
  http.get('/resource', () => {
    return HttpResponse.text('Fallback')
  })
)
 
worker.use(
  http.post('/login', () => {
    return new HttpResponse()
  })
)

한번만 재정의

once 필드를 가진 객체를 http method params 로 제공하면 된다.

worker.use(
  http.get(
    '/resource',
    () => {
      return HttpResponse.text('One-time override')
    },
    { once: true }
  )
)

타입스크립트 사용

http 핸들러

http.get<Params, RequestBodyType, ResponseBodyType, Path>(path, resolver)

제너릭을 지원한다.

Params : handler parameter
RequestBodyType : request.json()
ResponseBodyType : HttpResponse.text() ,HttpResponse.json()
Path : request 경로

import { http, HttpResponse } from 'msw'
 
type AddCommentParams = {
  postId: string
}
 
type AddCommentRequestBody = {
  author: User
  comment: string
}
 
type AddCommentResponseBody = {
  commentUrl: string
}
 
http.post<
  AddCommentParams,
  AddCommentRequestBody,
  AddCommentResponseBody,
  '/post/:postId'
>('/post/:postId', async ({ params, request }) => {
  const { postId } = params
 
  const commentData = await request.json()
  commentData.comment
 
  return HttpResponse.json({
    commentUrl: `/post/${postId}?commentId=${cypto.randomUUID()}`,
  })
})

참고

https://mswjs.io/docs/best-practices/