[MSW] Mocking Server 구축 시 주의할 점

Mocking Server를 구축하는 방법은 구글에 검색하면 많은 곳에서 확인할 수 있다.

 

그래서 주의할 점만 간단하게 작성하려고 한다.

 

Mocking Server 서버 구축 과정 중에서 Handler를 구현하고 이를 setupWorker에 담아 전달하고 App.js에서 개발 모드일 경우에만 실행하도록 작성한다.

 

그러나 이 때, 아래처럼 여러 개의 API를 배열로 가져오고 나서 이 배열을 다시 다른 배열에 담아서 setupWorker에 담아 보내려고 할 때, 에러가 발생할 것이다.

 

그 이유는 간단하다. API를 가져오는 것을 배열에 담았는데 이것을 또 배열에 담은 것이 문제였던 것이다.

import { rest, setupWorker } from 'msw';

const getHandlers = [
  rest.get(`/one`, () => {}),
  rest.get('/two', () => {}),
  rest.get('/three', () => {}),
];
export const handlers = [
  getHandlers,
];
export const worker = setupWorker(...handlers);

이를 해결하기 위해서는 API를 가져오는 배열을 또 다른 배열에 담았던 것을 제거하면 된다.

import { rest, setupWorker } from 'msw';

const getHandlers = [
  rest.get(`/one`, () => {}),
  rest.get('/two', () => {}),
  rest.get('/three', () => {}),
];
export const worker = setupWorker(...getHandlers);

위 처럼, API를 가져오는 배열을 다른 배열에 담을 필요없이 바로 setupWorker에 담아서 전달하면 된다.