1. React Testing Library 설치

npm install @testing-library/react @testing-library/jest-dom

2. 테스트 환경 설정

• create-react-app으로 프로젝트 생성시 아래의 라이브러리 설치 불필요

  → 자동으로 설치되어있음

npm install vitest @vitejs/plugin-react

• vite.config.tx 파일에 아래의 내용을 추가한다

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/setupTests.ts",
  },
});

• src디렉토리에 setupTests.ts파일을 생성하고 테스트 환경을 구성한다.

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

테스트 파일 작성

• 기본적으로 테스트 파일은 .test.tsx 로 작성하며 각 컴포넌트와 같은 디렉토리에 배치한다.

import { render, screen } from "@testing-library/react";
import { test, expect } from "vitest";
import App from "./App";

test("renders App component", () => {
  render(<App />);
  const headingElement = screen.getByText(/hello world/i);
  expect(headingElement).toBeInTheDocument();
});

• render : 컴포넌트를 가상돔에 렌더링한다.
• screen.getByText : 함수인자로 넘겨준 텍스트를 기준으로 요소를 찾는다.
• expect(headingElement).toBeInTheDocument() : 요소가 문서에 존재하는지 확인한다.

테스트 실행

npx vitest