Vite + React + Vitest: 10분 안에 복사해서 사용할 수 있는 간단한 테스트 설정

Source: Dev.to

소개

Vite + React + TypeScript 를 사용한다면 테스트를 추가하는 가장 빠른 방법은 Vitest 입니다.
이 글에서는 복사해서 바로 사용할 수 있는 깔끔한 설정을 보여드리겠습니다.

왜 이 스택인가?

• Vite – 빠른 개발 서버
• Vitest – Jest와 비슷한 느낌이지만 Vite 프로젝트에서는 더 빠른 테스트 러너
• React Testing Library – 사용자 관점에서 테스트

이 설정은 pnpm 과 중소 규모 프론트엔드 앱에 잘 맞습니다.

1) 패키지 설치

pnpm add -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

2) vite.config.ts 업데이트

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

이 설정이 하는 일

• jsdom 은 브라우저와 유사한 환경을 제공합니다.
• setupFiles 은 테스트 실행 전에 한 번 실행됩니다.
• globals: true 로 describe, it, expect 를 매번 import 하지 않아도 사용할 수 있습니다.

3) src/test/setup.ts 파일 만들기

import '@testing-library/jest-dom'

이렇게 하면 toBeInTheDocument() 같은 헬퍼가 추가됩니다.

4) package.json에 스크립트 추가

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:ui": "vitest --ui"
  }
}

사용법

• pnpm test – 한 번만 테스트를 실행합니다 (CI용).
• pnpm test:watch – 코딩하면서 워치 모드로 테스트를 실행합니다.

5) 컴포넌트 테스트 예시

컴포넌트: src/components/Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  )
}

테스트: src/components/Counter.test.tsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Counter } from './Counter'

describe('Counter', () => {
  it('increments count when button is clicked', async () => {
    render(<Counter />)

    await userEvent.click(screen.getByRole('button', { name: /increment/i }))

    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })
})

이 테스트는 내부 상태가 아니라 실제 동작을 검증합니다.

초보자들이 흔히 하는 실수

• React 테스트에 node 환경을 사용함 (jsdom 사용해야 함).
• @testing-library/jest-dom 설정을 빼먹음.
• 눈에 보이는 UI 동작 대신 구현 세부 사항을 테스트함.

마지막 팁

각 컴포넌트당 핵심 사용자 행동을 검증하는 테스트 하나부터 시작하세요.
첫날에 100개의 테스트를 만들 필요는 없습니다—작고 안정적인 테스트가 많고 깨지기 쉬운 테스트보다 낫습니다.

다음 단계로는 커버리지 보고서를 추가하고 CI에서 Vitest를 실행하는 것을 고려해볼 수 있습니다.