[React Test] 쿼리 사용 우선 순위, userEvent, Mock Service Worker

Query 사용 우선 순위

지금까지 getByTestId 쿼리를 이용해서 엘리먼트에 접근해서 테스트를 진행했지만 testing library에서 추천하는 쿼리 사용 우선 순위가 따로 있다.

getByRole을 우선으로 사용하는 것이 좋다.

About Queries | Testing Library

userEvent > fireEvent

userEvent는 fireEvent를 사용해서 만들어졌다. userEvent는 fireEvent에 비해 엘리먼트 타입에 따라 더욱 적절한 반응을 보여준다.

userEvent API를 사용하는게 더 추천되는 방법이다.

---

Mock Service Worker

백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서 실제로 서버에서 호출하는 end-to-end 테스트를 할 수 있지만 여기서는 서버에 요청을 보낼 때 그 요청을 가로채서 Mock Service Worker라는 것으로 요청을 처리하고 모의 응답(mocked response)를 보내줄 것이다.

1. npm install

npm install msw

   2. 핸들러 생성

• 핸들러 Type: Rest 또는 Graphql
• Http method: get, post…
• req, res, ctx

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

export const handlers = [
  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",
        },
      ])
    );
  }),
];

   3. 노드와 통합(Jest 사용하는 테스트 환경)

브라우저와 통합하는 방식도 있으나, Jest 사용 환경에 맞게 노드와 통합해준다.

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

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

setupTest.js

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: <https://github.com/testing-library/jest-dom>
import "@testing-library/jest-dom";

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

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

afterEach(() => server.resetHandlers()); // 테스트 이후 핸들러 리셋

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