Jest

1. 쿼리함수
2. ESLINT PlugIn
3. TDD 테스트 주도 개발
4. FireEvent
5. query 사용 우선순위
6. MSW 사용해서 테스트하기

목차

MSW란?

브라우저 서비스 워커를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지합니다. 그리고 그 요청을 실제 서버로 갈 때 중간에 가로채서 MSW클라이언트 사이드 라이브러리로 보낸다. 그 후 등록된 핸들러에서 요청을 처리한 후 모의 응답을 브라우저로 보낸다.

msw 설치

npm install msw --save

hanlder 생성

components/handler.js

rest or graphQL을 사용할지 정해주면 된다.

• handler

import { rest } from "msw";

export const handlers = [
  rest.get("<http://localhost:5000/products>", (req, res, ctx) => {
    return res(
      ctx.json([
        {
          name: "America",
          imagePath: "/image/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",
        }
      )
    );
  }),
];

req: 매칭 요청에 대한 정보

res: 모의 응답을 생성하는 기능적 유틸리티

ctx: 모의 응답의 상태 코드, 헤더, 본문 등을 설정하는 데 도움이 되는 함수 그룹

서버 생성

components/server.js

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

// 서버에 핸들러를 넣어주는 것이다.
// 내가 handler에서 작성한 rest요청들이 서버로 이동하게 된다.
export const server = setupServer(...handlers);

API mocking 설정

import "@testing-library/jest-dom";
import { server } from "./mocks/server";

//모든 테스트가 시작하기전에 서버를 listen을 한다.
beforeAll(() => server.listen());

// 테스트 중에 추가 request hanlder를 reset해준다.
// 다른 테스트에 영향을 주지 않게한다.
afterEach(() => server.resetHandlers());

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