[MSW] 2.0.8 달라진 점 적용해서 로그인 mock api 만들기

기존 프로젝트에서 1.2.3 버전을 사용하고 있었는데

2.0.8버전으로 msw가 업데이트 되면서 너무 많은 것이 달라졌다.

 

이전버전) 로그인 mock api (1.2.3)

import { rest } from 'msw'

const loginHandler = rest.post(
  '/api/auth/signin',
  (req, res, ctx) => {
    const { email, password } = req.body
    if (email === 'qwe@qwe.com' && password === 'qwer1234!') {
      return res(
        ctx.status(200),
        ctx.json({
          accessToken: '12343',
          refreshToken: '12342',
        }),
      )
    } else {
      return res(
        ctx.status(400),
        ctx.json({
          status: 400,
          errorCode: 'authentication_failed',
          message:
            '이메일 또는 비밀번호가 올바르지 않습니다. 다시 확인해주세요.',
        }),
      )
    }
  },
)

export default loginHandler

 

 

업데이트 버전) 로그인 Mock API (2.0.8)

import { http, HttpResponse } from 'msw'

export const loginHandler = http.post(
  '/api/auth/signin',
  async ({ request }) => {
    const data = {
      accessToken: '12341234',
      refreshToken: '1234',
    }

    const result: any = await request.json()

    const email = result?.email
    const password = result?.password

    if (email === 'qwe@qwe.com' && password === 'qwer1234!') {
      return new HttpResponse(JSON.stringify(data), {
        status: 200,
      })
    } else {
      return new HttpResponse(null, {
        status: 400,
        statusText: 'authentication_failed',
      })
    }
  },
)

 

 

rest와 req, res, ctx를 사용하는 것이 아니라

http, HttpResponse를 사용한다

이메일, 비밀번호와 같이 입력한 값에 접근하는 것도

req.body가 아니라 request.json()으로 접근해야한다.

 

데이터 불러오는 mock api

api를 사용할때 params 값을 전달해주는데

이 부분을 mock api에서 어떻게 적용하지 고민하다가 아래처럼 적용했다.

 

params: {

page: pageParam,

size: pageSize,

sort: sort,

},

data: data,

})

 

 

export const postProjectList = http.post(
  '/api/projects/list',
  ({ request }) => {
    const url = new URL(request.url)
    const page = url.searchParams.get('page')
    const size = url.searchParams.get('size')

    const startIndex = Number(page) * Number(size)
    const endIndex = startIndex + Number(size)
    const slicedData = projectData.slice(startIndex, endIndex)

    const data = {
      content: slicedData,
      totalElements: slicedData.length,
    }

    return HttpResponse.json(data, {
      status: 200,
      headers: {
        'Content-Type': 'application/json',
      },
    })
  },
)

 

아직 업데이트 버전이 익숙하지 않아서 어렵게 느껴지는데

익숙해지면 이전버전보다 더 편하게 느껴질 것 같다.