vitest + React Testing Library 사용하여 테스트 케이스 만들기

해당 글에서는 vitest 와 React Testing Library 를 이용하여 테스트 케이스를 만드는 방법을 소개합니다.

vitest 는 실행속도와 vite 와 통합이 간편하며, RTL 은 리액트 컴포넌트를 테스트 하기 위한 도구 입니다.

리액트 프로젝트 설치

npm create vite@latest

패키지 설치

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdom

vite.config.ts 셋팅

• globals: true
  • 이 설정은 테스트 파일에서 전역 함수(예: describe, it, test 등)를 import 없이 사용할 수 있게 합니다.
  • true로 설정하면 이러한 함수들을 매번 import 하지 않아도 됩니다.
• environment: "jsdom"
  • 테스트 환경을 JSDOM으로 설정합니다.
  • JSDOM은 Node.js 환경에서 브라우저와 유사한 DOM 환경을 시뮬레이션합니다.
  • 이는 브라우저 API를 사용하는 컴포넌트나 함수를 테스트할 때 유용합니다.
• setupFiles: "./src/test/setup.ts"
  • 테스트를 실행하기 전에 실행될 설정 파일의 경로를 지정합니다.
  • 이 파일에서는 모든 테스트에 공통적으로 필요한 설정이나 모의(mock) 객체 등을 정의할 수 있습니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import type { UserConfig as VitestUserConfig } from "vitest/config";

const vitestConfig: VitestUserConfig = {
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
  },
};

export default defineConfig({
  plugins: [react()],
  ...vitestConfig,
});

tsconfig.json

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

setup.ts 셋팅

src/test/setup.ts 파일 생성

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

공통 컴포넌트 기반의 테스트 케이스 작성

src/test/welcome.test.tsx

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

import Welcome from "../common/Welcome.tsx";

/**
 * render 랑 screen 을 가지고 컴포넌트를 렌더링 한 뒤, Dom 에 접근함.
 * expect 로 값이 예상한 조건과 일치하는지 확인.
 * toBeInTheDocument 이거는 이제 Dom 에 진짜 있는지 확인 하는거!
 */
describe("Welcome Component Test Start", () => {
  test("GUI Test - Welcome 컴포넌트 name props", () => {
    render(<Welcome name="World" />);
    const welcomeElement = screen.getByText(/Hello, World!/i);
    expect(welcomeElement).toBeInTheDocument();
  });
});

스크립트 작성

"scripts": {
  "test": "vitest"
}

실행

npm run test