🚀 React + Vite 테스트 환경 구축 및 실행 가이드

Vite 기반의 React 프로젝트에서 Vitest + React Testing Library를 활용한 테스트 환경을 구축하는 방법을 정리합니다.
실제 설정 및 문제 해결 과정까지 모두 포함하여 자세하게 알아가보도록 하겠습니다.

---

🛠 1️⃣ 프로젝트 생성 및 기본 설정

우선, Vite를 사용하여 새로운 React 프로젝트를 생성합니다.

# Vite + React 프로젝트 생성
npm create vite@latest my-project --template react
cd my-project

# 패키지 설치
npm install

📌 Vite는 빠른 개발 환경을 제공하는 빌드 툴이며, --template react 옵션을 통해 React 환경을 설정합니다.

---

📌 2️⃣ 테스트 환경 구축 (Vitest + React Testing Library)

Vite 프로젝트에서 테스트를 실행하려면 Vitest와 React Testing Library를 설치해야 합니다.

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

✅ 설치하는 패키지 설명

• vitest → Jest와 유사한 테스트 프레임워크 (Vite와 최적화됨)
• @testing-library/react → React 컴포넌트 테스트를 위한 라이브러리
• @testing-library/jest-dom → DOM 관련 추가 매처(matcher) 제공 (toBeInTheDocument() 등)
• jsdom → 브라우저 환경을 가상으로 제공하여 React 컴포넌트를 테스트할 수 있도록 함

---

📌 3️⃣ package.json 스크립트 추가

package.json에 테스트 실행 명령어를 추가합니다.

📍 package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "test": "vitest",
  "test:watch": "vitest --watch"
}

✅ 각 명령어 설명

• "test": "vitest" → 테스트 실행
• "test:watch": "vitest --watch" → 파일이 변경될 때 자동으로 테스트 실행

---

📌 4️⃣ vite.config.js 설정

Vite에서 Vitest를 사용할 수 있도록 설정 파일을 작성합니다.

📍 vite.config.js

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: "./vitest.setup.js",
    exclude: [...configDefaults.exclude, "e2e/*"],
  },
});

✅ 설정 설명

• environment: "jsdom" → 브라우저 환경을 시뮬레이션
• setupFiles: "./vitest.setup.js" → 테스트 실행 전에 필요한 설정을 로드
• exclude: [...configDefaults.exclude, "e2e/*"] → e2e 테스트 디렉토리 제외

---

📌 5️⃣ vitest.setup.js 추가

테스트 환경을 설정하는 vitest.setup.js 파일을 생성합니다.

📍 vitest.setup.js

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

이 파일을 통해 @testing-library/jest-dom의 확장 매처를 사용할 수 있습니다.

---

📌 6️⃣ 테스트 파일 작성

컴포넌트별로 tests/ 디렉토리를 생성하여 테스트 파일을 관리합니다.

📂 프로젝트 구조

src/
│── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── tests/
│   │   ├── Header.test.jsx
│   │   ├── Footer.test.jsx
│── vite.config.js
│── vitest.setup.js
│── package.json

✅ Footer 컴포넌트 테스트

📍 src/components/tests/Footer.test.jsx

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

test("Footer가 정상적으로 렌더링되어야 한다", () => {
  render(<Footer />);

  expect(screen.getByText("씨제이올리브영 주식회사")).toBeInTheDocument();
  expect(screen.getByText("이용약관 | 법적고지")).toBeInTheDocument();
  expect(screen.getByText(/하나은행 구매안전 서비스/)).toBeInTheDocument();
});

test("회사소개 링크가 올바르게 존재해야 한다", () => {
  render(<Footer />);

  const companyLink = screen.getByText("회사소개");
  expect(companyLink.closest("a")).toHaveAttribute("href", "https://corp.oliveyoung.com/ko");
});

test("고객센터 및 법적 정보 링크들이 존재해야 한다", () => {
  render(<Footer />);

  expect(screen.getByText("개인정보처리방침")).toBeInTheDocument();
  expect(screen.getByText("청소년보호방침")).toBeInTheDocument();
  expect(screen.getByText("이메일무단수집거부")).toBeInTheDocument();
});

---

✅ Header 컴포넌트 테스트

📍 src/components/tests/Header.test.jsx

import { render, screen, fireEvent } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import Header from "../Header";

test("Header가 정상적으로 렌더링되어야 한다", () => {
  render(
    <MemoryRouter>
      <Header />
    </MemoryRouter>
  );

  expect(screen.getByAltText("올리브영 로고")).toBeInTheDocument();
  expect(screen.getByPlaceholderText("상품, 브랜드, 성분 검색")).toBeInTheDocument();
  expect(screen.getByText("회원가입")).toBeInTheDocument();
});

test("로고 클릭 시 홈(/)으로 이동해야 한다", () => {
  const { container } = render(
    <MemoryRouter>
      <Header />
    </MemoryRouter>
  );

  const logo = screen.getByAltText("올리브영 로고");
  fireEvent.click(logo);

  expect(container.innerHTML).toContain("올리브영");
});

---

📌 7️⃣ 테스트 실행 및 문제 해결

테스트 실행

npm run test

✔️ 정상적으로 설정되었다면 아래처럼 출력됩니다.

✓ src/components/tests/Footer.test.jsx (3 tests)
✓ src/components/tests/Header.test.jsx (2 tests)

Test Files  2 passed (2)
      Tests  5 passed (5)

---

🔍 문제 해결 과정

1. Vitest가 실행되지 않음 (vitest: command not found)

   npm install -D vitest

2. @testing-library/react를 찾지 못함

   npm install -D @testing-library/react

3. @testing-library/jest-dom이 필요함

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

4. 패키지 문제 해결 (node_modules 삭제 후 재설치)

   rm -rf node_modules package-lock.json
   npm install

---

✅ 최종 요약

필요한 구성 파일들

단계별 요약

단계	명령어
1. Vite 프로젝트 생성	npm create vite@latest my-project --template react
2. 패키지 설치	npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
3. package.json 설정	"test": "vitest" 추가
4. vite.config.js 설정	environment: "jsdom" 등 추가
5. vitest.setup.js 설정	import "@testing-library/jest-dom" 추가
6. 테스트 작성	src/components/tests/*.test.jsx 생성
7. 테스트 실행	npm run test

---

🎯 결론

이제 React + Vite 프로젝트에서 Vitest를 활용한 테스트 환경을 완벽하게 구축할 수 있습니다! 🚀

앞으로 다른 프로젝트에서도 이 가이드를 참고하여 빠르게 테스트 환경을 구축할 수 있습니다.

궁금한 점이 있으면 언제든지 질문하세요! 😃