React test 작성 -2

userEvent vs fireEvent

userEvent : fireEvent를 사용해서 만들어짐.
userEvent 내부 코드를 보면 fireEvent를 사용하면서 엘리먼트 타입에 따라서 Label을 클릭했을 때, 더욱 적절한 반응을 보여줌 (보다 유저의 진짜 반응처럼 보임)

userEvent.click(button) 시 버튼이 focus되지만, fireEvent로 버튼 클릭 시 focus 되지 않음.

즉 userEvent를 쓰는 것을 보다 권장함.

Eslint를 통한 디버깅

내부 설정해주기

extends 항목 : 플러그인을 추가 한 후에 규칙을 정해줘야 사용가능.
그래서 extends 항목에 사용하고자 하는 규칙을 설정.
recommended는 추천이 되는 걸 사용
규칙 변경 원할 시 rule 항목 추가

{
	"plugins": [
      "testing-library",
      "jest-dom"
      ],
      "extends": [
        "react-app",
        "react-app/jest",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
      ]
}

MSW

MSW : Mock Service Worker
브라우저에 서비스 워커를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지. 실제 서버로 갈 때 중간에 가로채서(intercept) MSW 클라이언트 사이드 라이브러리로 보내고, 등록된 핸들러에서 요청 처리 후 모의 응답을 브라우저에게 보냄.
API 응답 포함 테스트시 유용.
Jest 사용시 노드와 통합 방식 사용해야 함 (브라우저 X)

MSW 세팅

1. MSW 설치

npm install msw --save

2. handler 생성

// src/mocks/handlers.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. server 생성

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

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

4. setupTests 생성

//src/setupTests.js

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

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

beforeAll(() => {
  server.listen();
});
// 서버 켜주고
afterEach(() => server.resetHandlers());
// 다른 핸들러에 영향 안미치도록 리셋해주고
afterAll(() => server.close());
// 서버 닫기