Mock

Info

• 현재 FE만 구현되어 있는 상태이기 때문에 테스트가 필요한 경우, Mock 데이터를 사용해야 함.
• 효율적인 테스트를 위한 환경을 고려하던 중, MSW(MockServiceWorker)를 알게 됨.
• 현재 Local 환경에서는 MSW를 통해 Mock 데이터를 가져오게 되어 있음.

MSW (MockServiceWorker)

브라우저 또는 Node.js 환경에서 API 요청을 가로채고 가짜 데이터를 반환하는 Mock 서버를 설정할 수 있음.

• 가상 API 응답: 실제 서버가 없어도 API 통신을 하는 것과 같이 동작 가능. (실제 API 통신 소스를 그대로 사용 가능.)
• 개발 테스트 지원: FE 개발 시, 실제 서버가 없어도 네트워크 관련 기능이나 유닛, 통합 테스트 가능.
• BE 서비스 로직과 유사하게 설정 가능: ERROR 케이스나 SUCCESS 케이스들을 실제 BE 서비스와 흡사하게 세팅 가능. (기존에 정의한 FE 소스를 활용할 수 있음.)

Install

npm install msw --save-dev

Setting

• dev 환경으로 서비스 실행 시, Axios instance 생성 시점에 baseURL: '' 를 통해 MSW에 요청을 보내도록 설정됨.

Worker

• 구현된 handler로 Worker를 실행하는 구동부.

browser.ts

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

Handlers

• handlers
  • 구현된 handler들을 모아놓은 단순한 List
  • handler 추가 시, 해당 List에 추가 필요. (반대로, 당장 사용하지 않는 handler는 List에서 제거)

handlers.ts

import AuthHandlers from './handlers/AuthHandlers'  
import HandlerInterceptor from './handlers/HandlerInterceptor'  
import ScheduleHandlers from './handlers/ScheduleHandlers'  
import HolidayHandlers from './handlers/HolidayHandlers'  
  
const handlers = [HandlerInterceptor, ...AuthHandlers, ...ScheduleHandlers, ...HolidayHandlers]  
  
export default handlers

• handler
  • 실제 request를 받아 response를 수행하는 function
  • DB 상태는 간단하게 variable로 보관
    • 생성 시점: 서비스 시작 시점
    • 제거 시점: 서비스 종료 시점
  • MSW의 http, HttpResponse 를 사용하여, request를 받고 response
  • 실제 BE 로직처럼 request에서 받은 parameter에 따라 다른 객체를 response 가능
    • 에러 발생이 필요한 시점에 Error 객체를 response
    • 성공한 시점에 케이스에 따라 분리하여 각기 다른 객체를 response

ScheduleHandlers.ts

import { http, HttpResponse } from 'msw'  
import { ApiResponse } from '@utils/api/models/ApiResponse'  
import { Schedule } from '@typings/Schedule'  
import { apiCode } from '@utils/error/constant/ApiCode'  
import { scheduleType } from '@typings/constants/ScheduleType'  
import dateFormatUtil from '@utils/date/dateFormatUtil'  
  
let schedules = [  
  new Schedule({  
    id: 1,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/06 00:00',  
    endedAt: '2025/01/10 23:59',  
    title: 'schedule1',  
    contents: 'schedule1',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 2,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/07 07:00',  
    endedAt: '2025/01/07 12:30',  
    title: 'schedule2',  
    contents: 'schedule2',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 3,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/07 08:00',  
    endedAt: '2025/01/07 08:30',  
    title: 'schedule3',  
    contents: 'schedule3',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 4,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/05 04:00',  
    endedAt: '2025/01/05 23:00',  
    title: 'schedule4',  
    contents: 'schedule4',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 5,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/07 04:00',  
    endedAt: '2025/01/09 23:59',  
    title: 'schedule5',  
    contents: 'schedule5',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 6,  
    type: scheduleType.TIME,  
    isImportant: true,  
    startedAt: '2025/01/03 04:00',  
    endedAt: '2025/01/07 23:59',  
    title: 'schedule6',  
    contents: 'schedule6',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 7,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/09 13:00',  
    endedAt: '2025/01/09 14:00',  
    title: 'schedule7',  
    contents: 'schedule7',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 8,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/09 11:00',  
    endedAt: '2025/01/09 17:00',  
    title: 'schedule8',  
    contents: 'schedule8',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 9,  
    type: scheduleType.TIME,  
    startedAt: '2025/01/09 11:00',  
    endedAt: '2025/01/11 17:00',  
    title: 'schedule9',  
    contents: 'schedule9',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 10,  
    type: scheduleType.TIME,  
    startedAt: '2025/02/09 11:00',  
    endedAt: '2025/02/11 17:00',  
    title: 'schedule9',  
    contents: 'schedule9',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 11,  
    type: scheduleType.TASK,  
    startedAt: '2025/02/09 00:00',  
    endedAt: '2025/02/11 23:59',  
    title: 'task1',  
    contents: 'task1',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
  new Schedule({  
    id: 12,  
    type: scheduleType.TASK,  
    isImportant: true,  
    startedAt: '2025/01/01 00:00',  
    endedAt: '2025/01/02 23:59',  
    title: 'task2',  
    contents: 'task2',  
    createdAt: '2025/01/06 15:00:00',  
    updatedAt: '2025/01/06 15:00:00',  
  }),  
]  
  
const ScheduleHandlers = [  
  http.get<  
    never,  
    | {  
        year?: number  
        month?: number  
        day?: number  
      }  
    | undefined,  
    null | ApiResponse<Schedule[]>  
  >('/schedule', ({ request }) => {  
    const { stringToDate } = dateFormatUtil  
    const date = new URL(request.url).searchParams  
    const year = Number(date.get('year'))  
    const month = Number(date.get('month'))  
    const day = Number(date.get('day'))  
  
    if (day) {  
      return HttpResponse.json(  
        new ApiResponse<Schedule[]>().build(  
          apiCode.SUCCESS,  
          schedules.filter(schedule => {  
            const targetDate = stringToDate(schedule.startedAt)  
            return (  
              targetDate.year() == year &&  
              targetDate.month() + 1 == month &&  
              targetDate.date() == day  
            )  
          }),  
        ),  
      )  
    }  
    if (month) {  
      return HttpResponse.json(  
        new ApiResponse<Schedule[]>().build(  
          apiCode.SUCCESS,  
          schedules.filter(schedule => {  
            const targetDate = stringToDate(schedule.startedAt)  
            return targetDate.year() == year && targetDate.month() + 1 == month  
          }),  
        ),  
      )  
    }  
    if (year) {  
      return HttpResponse.json(  
        new ApiResponse<Schedule[]>().build(  
          apiCode.SUCCESS,  
          schedules.filter(schedule => stringToDate(schedule.startedAt).year() == year),  
        ),  
      )  
    }  
  
    return HttpResponse.json(new ApiResponse<Schedule[]>().build(apiCode.SUCCESS, schedules))  
  }),  
  
  http.post<never, Schedule, ApiResponse<number | null>>('/schedule', async ({ request }) => {  
    const schedule: Schedule = await request.json()  
  
    if (!schedule)  
      return HttpResponse.json(new ApiResponse<null>().build(apiCode.INVALID_REQUEST_PARAM, null))  
  
    const id = schedules.length + 1  
    schedule.id = id  
    schedules.push(schedule)  
  
    return HttpResponse.json(new ApiResponse<number>().build(apiCode.SUCCESS, id))  
  }),  
  
  http.delete<{ id: string }, null, null>('/schedule/:id', ({ params }) => {  
    const id = Number(params.id)  
    if (!id)  
      return HttpResponse.json(new ApiResponse<null>().build(apiCode.INVALID_REQUEST_PARAM, null))  
    schedules = schedules.filter(schedule => schedule.id != id)  
    return HttpResponse.json(new ApiResponse<number>().build(apiCode.SUCCESS, id))  
  }),  
  
  http.put<{ id: string }, Schedule, null>('/schedule/:id', async ({ params, request }) => {  
    const id = Number(params.id)  
    const schedule = await request.json()  
    if (!id || !schedule)  
      return HttpResponse.json(new ApiResponse<null>().build(apiCode.INVALID_REQUEST_PARAM, null))  
  
    schedules = schedules.map(stateSchedules =>  
      stateSchedules.id == id ? schedule : stateSchedules,  
    )  
    return HttpResponse.json(new ApiResponse<null>().build(apiCode.SUCCESS, null))  
  }),  
]  
  
export default ScheduleHandlers