JEST Mock Service Worker 설정 및 기본 사용

Mock Service Worker

Service Worker API를 사용하여 실제 요청을 가로채는 API Mocking 라이브러리입니다.

서버에 대한 호출을 막고 사용자가 작성한 응답을 전송

1. 응답을 보내줄 핸들러 작성
2. 핸들러를 이용해 응답을 보낼 서버 작성
3. 테스트 전 서버가 요청을 MSW로 라우팅, 핸들러 재설정, 서버 종료에 대한 테스트 서버 설정

npm i -D msw

Jest를 이용해 axios를 모킹하면 안 되나요?

간단한 앱에서는 모킹이 가능하지만 더 복잡한 앱에서는 MSW로 다양한 도구를 이용할 수 있다

axios 모킹에 MSW를 사용하는 이유는 여러 가지입니다.

1. 동시 요청에 대한 Mocking 반환값은 관리하기 어렵고 불안정하다.
2. 페이지를 재정렬 시 모의 화면에서 반환값의 순서가 잘못되어 테스트가 실패할 수도 있다.
3. 요청의 POST 데이터 등에 따라 값을 반환하고 싶을 때 MSW는 핸들러 함수로 가능하다.
4. MSW는 쿠키, 이진 응답(예: 이미지) 등 요청의 정교하게 처리할 수 있다.
5. 서버 요청 시 사용할 메소드를 바꿀 수 있고, MSW는 어떤 메소드를 사용하든 작동한다.

Mocking REST API

1. rest 작성 후 HTTP 메소드 선택(GET, POST, PATCH…)
2. reponse resolver 작성
   • req : 요청에 대한 정보 처리 작성
   • res : 응답에 대한 처리 작성
   • ctx : 응답에 대해 어떻게 처리할건지 자세히 작성

//src/mocks/handlers.js
import { rest } from "msw";

export const handlers = [
  rest.get("<http://localhost:3030/scoops>", (req, res, ctx) => {
    return res(
      ctx.json([
        { name: "Chocolate", imagePath: "./images/chocolate.png" },
        { name: "Vanilla", imagePath: "./images/vanilla.png" },
      ])
    );
  }),
];

서버설정

위의 handlers에서 정의한 요청 핸들러로 서버 인스턴스를 정의한다.

//src/mocks/server.js
import { handlers } from "./handlers";
import { setupServer } from "msw/node";

export const server = setupServer(...handlers);

테스트 서버 설정

setupTests.js 파일은 CRA으로 프로젝트 생성했다면 src 폴더에 파일이 있지만 다른 방법으로 프로젝트를 생성했다면 본인이 직접 만들어야 하며 서로 파일의 위치가 다르다.

beforeAll(() => server.listen());

테스트 전 서버가 항상 수신 대기하며 모든 네트워크 요청을 실제 네트워크가 아닌 MSW로 라우팅

afterEach(() => server.resetHandlers());

각 테스트가 끝나면 핸들러를 서버 정의했을 때의 핸들러로 재설정

afterAll(() => server.close());

모든 테스트가 끝나면 서버를 종료

CRA - setupTests.js

//src/setupTests.js -- CRA
import "@testing-library/jest-dom";

// src/setupTests.js 정의된 파일에서 서버를 가져오기
import { server } from "./mocks/server.js";

beforeAll(() => server.listen());

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

Vite - jest.setup.js

//[최상위 루트]/jest.setup.js -- Vite
import "@testing-library/jest-dom";

// src/setupTests.js 정의된 파일에서 서버를 가져오기
import { server } from "./mocks/server.js";

beforeAll(() => server.listen());

afterEach(() => server.resetHandlers());

afterAll(() => server.close());