[테스트 코드]Mock Service Worker

01. Mock Service Worker

• 백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서는 실제로 서버에 호출하는 end-to-end 테스트를 할 수 있지만, 서버에 요청을 보낼 때 그 요청을 가로채서 mock-service-worker라는 것으로 요청을 처리하고 모의 응답을 보낼 때 사용

02. MSW 작동 방식

• 총 2가지 : 브라우저와 통합 / 노드와 통합
• 지금은 노드와 통합 (제스트 방법)
• 브라우저에 서비스 워크를 등록하여, 외부로 나가는 네트워크 리쿼스트 감지
• 요청을 실제 서버로 갈 때 중간에 가로채서 MSW 클라이언트 사이드 라이브러리로 전송
• 그 후 등록된 핸들러에서 요청을 처리한 후 모의 응답을 브라우저로 보냄

03. MSW 사용 방식

• msw 설치

npm install msw

• 핸들러 생성
  • mocks / handlers.js

import { rest } from "msw";

export const handlers = [
// req : 매칭 요청에 대한 정보
// res : 모의 응답을 생성하는 기능적 유틸리티
// ctx : 모의 응답의 상태 코드, 헤더, 본문 등을 설정하는데 도움이 되는 함수 그룹
  rest.get("http://localhost:5000/products", (req, res, ctx) => {
    return res(
      ctx.json([
        {
          name: "America",
          imagePath: "/images/america.jpeg",
        },
        {
          name: "England",
          imagePath: "/images/england.jpeg",
        },
      ])
    );
  }),
  rest.get("http://localhost:5000/options", (req, res, ctx) => {
    return res(ctx.json([{ name: "Insurance" }, { name: "Dinner" }]));
  }),
];

• 노드와 통합(jest 사용하는 테스트 환경)
  

1. 서버 생성 mocks/server.js

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

// mocking server 생성
export const server = setupServer(...handlers);

2. API mocking 설정 setupTest.js

import "@testing-library/jest-dom";

import { server } from "./mocks/server";

// 모든 테스트가 시작하기 전에, 서버 리슨
beforeAll(() => server.listen());

// 테스트 중에 추가한 리퀘스트핸들러들을 리셋해줘서 다른 테스트에 영향이 가지 않도록 해주기
afterEach(() => server.resetHandlers());

// 테스트가 다 끝났을 떄 클린 업 해주기
afterAll(() => server.close());

04. 테스트에서 비동기 코드 테스트 1차적으로 작성하기

• Type.test.js

import { render, screen } from "@testing-library/react";
import Type from "./Type";

//find기 때문에 async
test("display product images form server", async () => {
  // orderType : 내부 컴포넌트 선택
  render(<Type orderType="products" />);

  // find기 때문에 await
  const productImages = await screen.findAllByRole("img", {
    name: /product$/i,
  });
  expect(productImages).toHaveLength(2);

  // map을 사용하여 2개의 alt 요소를 거른 후
  // 같은 내용인지 확인
  const altText = productImages.map((element) => element.alt)
  expect(altText).toEqual(["America product", "England product"])
});