PromleeBlog
sitemap
aboutMe

posting thumbnail
React 테스트 환경 구성 - React로 시작하는 TDD 2편
Setting up React Test Environment - TDD with React Part 2

📅
들어가기 전에
1단계: React 프로젝트 생성하기
프로젝트 생성 명령어
2단계: React 실행해 보기
3단계: 테스트 도구 설치
4단계: 테스트 환경 설정
vite.config.ts 수정
setupTests.ts 생성
package.json 수정
5단계: 첫 번째 테스트 실행
Next.js 환경 설정
1. 퀵스타트
2. 수동 설정
3. 설정 파일 생성
4. 스크립트 추가
5. Next.js 테스트 작성 시 주의사항
결론
참고

들어가기 전에 🔗

지난 1편에서 우리는 왜 프론트엔드에도 테스트가 필요한지 알아보았습니다.
이제 이론 공부는 끝났으니, 실제로 내 컴퓨터에 실습 환경을 만들어 볼 차례입니다.

오늘은 React 프로젝트를 설치하고 실행하는 아주 기초적인 단계부터, 테스트 도구를 세팅하는 과정까지 하나씩 천천히 따라 해 보겠습니다.

1단계: React 프로젝트 생성하기 (Vite) 🔗

과거에는
Create React App (CRA)
을 많이 썼지만, 요즘은 더 빠르고 가벼운
Vite(비트)
를 표준처럼 사용합니다.
터미널(맥은 Terminal, 윈도우는 PowerShell)을 열고 아래 명령어를 입력해 주세요.

프로젝트 생성 명령어 🔗

Terminal
 # 1. 프로젝트 생성 (my-tdd-app이라는 폴더가 만들어집니다) 선택은 모두 Enter 눌러 기본값으로 진행하세요.
npm create vite@latest my-tdd-app -- --template react-ts
 
 # 2. 생성된 폴더로 이동
cd my-tdd-app
 
 # 3. 필요한 라이브러리 내려받기 (이 과정이 꼭 필요합니다!)
npm install

2단계: React 실행해 보기 🔗

설치가 끝났으니 화면이 잘 나오는지 확인해 봐야겠죠?
터미널에 아래 명령어를 입력합니다.
Terminal
npm run dev
명령어를 치면 다음과 같은 메시지가 뜰 것입니다.
  VITE v5.x.x  ready in 250 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
이제 인터넷 브라우저(Chrome 등)를 켜고 주소창에 http://localhost:5173을 입력해 보세요.
화면에
Vite + React
로고가 빙글빙글 돌아가고 있다면 성공입니다!
이제 프로젝트 준비가 끝났으니, 테스트 도구를 설치하러 가봅시다.

3단계: 테스트 도구 설치 (Vitest & RTL) 🔗

Vite
로 만든 프로젝트는 매우 가벼워서, 테스트 도구가 기본으로 들어있지 않습니다.
우리는 다음 세 가지 도구를 설치해야 합니다.

터미널을 하나 더 열거나, 실행 중인 서버를 끄고(Ctrl + C) 아래 명령어를 입력하세요.
Terminal
npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

4단계: 테스트 환경 설정 🔗

도구를 설치했으니 설정을 조금 만져줘야 합니다.
프로젝트 최상위 폴더에 있는 vite.config.ts 파일을 열어 수정합니다.

vite.config.ts 수정 🔗

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // [추가] 테스트 설정
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  },
})
(참고: 빨간 줄이 뜬다면 vitest 타입 문제일 수 있습니다. 일단 넘어가셔도 실행에는 지장이 없습니다.)

setupTests.ts 생성 🔗

src 폴더 안에 setupTests.ts 파일을 새로 만들고 아래 내용을 붙여넣으세요.
이 파일은 테스트가 시작되기 전에 "이 환경은 브라우저처럼 동작해라"라고 세팅해 주는 역할을 합니다.
src/setupTests.ts
import '@testing-library/jest-dom';

package.json 수정 🔗

마지막으로, 우리가 테스트를 편하게 실행할 수 있도록 단축 명령어를 등록합니다.
package.json 파일을 열어 scripts 부분을 수정합니다.
package.json
{
  "name": "my-tdd-app",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "test": "vitest",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  // ... (생략)
}

5단계: 첫 번째 테스트 실행 🔗

모든 준비가 끝났습니다.
이제 진짜 테스트가 돌아가는지 확인해 볼까요?
src/App.test.tsx 파일을 만들고 아주 간단한 테스트 코드를 작성해 봅니다.
src/App.test.tsx
import { render, screen } from '@testing-library/react';
import App from './App';
import { describe, it, expect } from 'vitest';
 
describe('App 컴포넌트', () => {
  it('화면에 Vite + React 글자가 보여야 한다', () => {
    render(<App />);
    // 화면에 해당 글자가 있는지 확인
    expect(screen.getByText(/Vite \+ React/i)).toBeInTheDocument();
  });
});
이제 터미널에 명령어를 입력합니다.
Terminal
npm test
npm test
npm test
초록색 글씨로
PASS
가 뜬다면 TDD를 위한 모든 환경 구축이 완료된 것입니다!

Next.js 환경 설정 (Vitest) 🔗

만약
Vite
가 아니라
Next.js
를 사용하신다면 설정 방법이 조금 다릅니다.
최근
Next.js
공식 문서에서는
Jest
대신
Vitest
사용을 권장하는 추세이며, 설정 방법도 구체적으로 안내하고 있습니다.

1. 퀵스타트 (Quickstart) 🔗

아직 프로젝트를 만들지 않았다면, 예제가 포함된 명령어로 한 번에 설치할 수 있습니다.
Terminal
npx create-next-app@latest --example with-vitest my-next-app

2. 수동 설정 (Manual Setup) 🔗

이미 프로젝트가 있다면 직접 라이브러리를 설치해야 합니다.
Next.js
에서
TypeScript
를 사용할 때 필요한 패키지들입니다.
Terminal
 # Next.js용 Vitest 관련 패키지 설치
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths

3. 설정 파일 생성 🔗

프로젝트 최상위 경로(루트)에 vitest.config.mts 파일을 생성하고 아래 내용을 입력합니다.
(
Next.js
설정 파일과 충돌하지 않도록 별도로 만듭니다.)
vitest.config.mts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
 
export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: 'jsdom',
  },
})

4. 스크립트 추가 🔗

package.json 파일에 테스트 실행 명령어를 추가합니다.
package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

5. Next.js 테스트 작성 시 주의사항 🔗

Next.js
의 새로운 기능인 비동기 서버 컴포넌트(Async Server Components)는 아직
Vitest
에서 완벽하게 지원하지 않습니다.
따라서 단위 테스트(Unit Test)는 주로
동기식 서버 컴포넌트
나
클라이언트 컴포넌트
를 대상으로 작성하는 것을 권장합니다.
__tests__/page.test.tsx
import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'
 
test('Page 컴포넌트 렌더링 테스트', () => {
  render(<Page />)
  // heading 태그(h1~h6) 중 이름이 'Home'인 요소를 찾습니다.
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})

결론 🔗

소스 코드는 GitHub - Promleeblog/react-tdd-setup↗ 에서 확인할 수 있습니다.
Terminal
git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part2
오늘은 React 프로젝트를 바닥부터 생성하고 테스트 환경까지 구축해 보았습니다.
과정이 조금 길었지만, 한 번만 해두면 앞으로는 편하게 개발할 수 있습니다.


다음 시간에는
3편. 사용자 행동 기반 테스트 작성
을 통해, 사용자가 버튼을 클릭하고 입력을 하는 과정을 어떻게 테스트 코드로 옮기는지 본격적으로 알아보겠습니다.

참고 🔗