6week
이효석
About

JEST 관련 에러

  • 단, React 18 버전으로 넘어오면서 약간의 warning 이 생기는 문제 발생 중

  • 책에 나온 코드

it("영문과 숫자만 입력된다.", () => {
  const { input } = setup();
  const inputValue = "안녕하세요123";
 
  // 사용자의 입력을 흉내내는 메서드, 사용자가 키보드로 타이핑을 하는 것을 테스트 가능
  userEvent.type(input, inputValue);
 
  expect(input.value).toEqual("123");
});
  • userEvent 사용시 발생하는 Warning 상황

warning 상황

  • React 18 이상 버전에서 실제 문제 없이 작동하는 코드
it("영문과 숫자만 입력된다.", () => {
  const { input } = setup();
  const inputValue = "안녕하세요123";
 
  // fireEvent 로 처리해야 문제가 생기지 않음
  fireEvent.change(input, { target: { value: inputValue } });
 
  expect(input.value).toEqual("123");
});
  • fireEvent 로 변경 후, 정상 작동하는 상황

정상 상황

비동기 컴포넌트에서 msw 이슈를 해결하기 위해 이리저리 삽질한 Story

  • CRA + MSW 2.0 버전에서의 이슈로 인하여, 2.0 문법을 사용하면 특정 모듈이 import 가 안되는 이슈가 발생
  • 해결을 위해 다양한 접근을 했지만, 모두다 제대로 동작하지 않는 이슈 발생
  • CRA 를 사용하지 않기 위해, Vite 를 사용하여 번들링
  • Vite 에, jest, msw 등등을 설치하고 테스트
  • Vite 에서 jest 사용을 위한 설정 참고
  • 그래서 실행을 했으나, 아래와 같은 이슈 발생

alt text

  • 이를 해결하기 위해 msw 공식 문서를 확인

alt text

  • node v20 사용중 & jest.polifills.js 적용, 그러나

alt text

  • 그래서 찾아보니 CRA 이슈로 node 환경에서 global 이 제대로 안불러와지는 문제라고 한다. 그래서 더 찾아보니

두둥

결론, vitest 로 갈아탈 타이밍이다

Vite & Vitest 로 해당 코드를 돌리기 위해 삽질한 결과물

  • vite 로 프로젝트 생성
# npm 6 이하 버전 일 경우
npm create vite@latest [프로젝트 명] --template react-ts
# npm 7 이상 버전일 경우
npm create vite@latest [프로젝트 명] -- --template react-ts
 
# 직접 선택을 원할 경우, 아래의 명령어로 만들고 프로젝트명, 언어 및 프레임워크 선택 가능
npm create vite@latest
  • 필요 모듈 설치 (msw, vitest, jsdom, @testing-library/react, @testing-library/jest-dom)
npm i -D msw vitest jsdom @testing-library/react @testing-library/jest-dom
  • test 스크립트 추가
 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    // 추가
    "test": "vitest"
  },
  • vite.confing.ts 에 테스트를 위한 세팅 필요
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  // test 파트 추가 필요
  test: {
    globals: true,
    environment: "jsdom",
  },
});
import {
  afterAll,
  afterEach,
  beforeAll,
  beforeEach,
  describe,
  expect,
  it,
} from "vitest";
  • 하지만, 아직 코드 내부에서 사용하는 몇몇 명령어는 이전의 라이브러리 것 사용 필요
  • 위의 라이브러리를 사용하지 않으면, 몇몇 에러 발생 (expect().toBeInTheDocument() 같은 명령어 사용 불가)
import { fireEvent, render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
  • 테스트 수행
npm run test

성공

[p. 526] TDD 에 대한 의견은 어떠신가요?

StudyStudy