MSW를 사용하여 react query test하기

MSW(Mock Service Worker) 사용이유

react query 테스트 코드 작성 중 실제 api를 호출해서 실제 db에 접근하는것을 방지해야겠다는 생각을 하였고 mock server를 어떻게 구성할까 서치하던 중 msw를 발견하였다.

MSW의 기본 컨셉

test시 실제 api 호출이 일어나면 해당 호출을 가로챈 후 내가 커스텀해놓은 mock server code를 통해 reponse를 돌려 준다

따라서 실제 data에 접근하지 않는다.

MSW 라이브러리 설치

$ npm i -D msw

server setup

나는 test 폴더 하위에 mock 폴더를 생성하여 mockserver setup과 그 과정에서 사용할 mock data를 정의해주었다.

아래와 같이 특정 api 주소를 호출 시 어떤 reponse를 줄지 mock server를 setup 해준다.

import { setupServer } from "msw/node";
import { rest } from "msw";
import MockData from "./data.json";

export const server = setupServer(
  rest.get(process.env.REACT_APP_API_URL + `/reservations`, (req, res, ctx) => {
    const response = MockData.reservations; //내가 정의한 mock data
    return res(ctx.json(response));
  }),
)

test code 작성

react query를 따로 custom hook으로 빼서 사용중이었는데 이를 테스트하기 위해 render hook을 이용하였다. renderhook으로 hook을 실행 시킨 후 waitFor 메소드를 사용해 실행 시킨 hook이 성공할때까지 기다린 후 다음 코드를 실행한다.

beforeAll(() => {
  server.listen();
});
afterEach(() => {
  server.resetHandlers();
});
afterAll(() => {
  server.close();
});

...
it("useReservationQuery test", async () => {
    const { result } = renderHook(() => useReservationQuery(1), { wrapper });
    await waitFor(() => result.current.isSuccess);
    expect(result.current.data).toStrictEqual({
      pageParams: [undefined],
      pages: [MockData.reservations],
    });
  });
...

it("rendering success", async () => {
    render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      { wrapper }
    );
    //mock data가 화면에 잘 렌더링 되었는지 확인
    const title = await screen.findByText("mock 부모님 용돈");
    const account = await screen.findByText("우리 mock 123412341234");


    expect(title).toBeInTheDocument();
    expect(account).toBeInTheDocument();
    cleanup();
  });