Vitest 시작하기

 

 

1단계 : 환경설정

1. 패키지 설치하기

yarn add -D vitest //테스트 프레임워크

yarn add -D  @testing-library/react // React 컴포넌트와 Hooks 테스트
yarn add -D  @testing-library/jest-dom // DOM 관련 어설션 확장
yarn add -D  @testing-library/user-event //사용자 상호작용 시뮬레이션
yarn add -D  jsdom //Node.js 환경에서 브라우저 DOM 시뮬레이션

---

테스트 패키지 설명

1. vitest : 테스트 실행 엔진

import { describe, it, expect } from 'vitest';

// descibe : 테스트 그룹 ( { } 안에 관련 테스트를 묶는 컨테이너 )
// it :개별 테스트 ( { } 안에 하나의 테스트 케이스 내용을 작성 )

describe('useTest', () => {
	it('should validate form', () => {
    	expect(result).toBe(true);
    });
});

• 테스트 실행 엔진
• 테스트 케이스 정의 (describe, it, test)
• 어설션 제공 (expect, assert)
  • 어설션: " 이 값이 맞다" 고 단언하는 검증 문장 (expect(result).toBe(true);  // ← 이것이 "어설션")
• Watch 모드, 커버리지, 병렬 실행 지원
  • watch 모드: 파일 변경 시 자동으로 테스트를 다시 실행
  • 커버리지: 테스트가 코드의 어느 부분까지 검증했느지 비율 ( 100% : 모든 코스트가 테스트됨)

2. @testing-library/react : React 컴포넌트 테스트

import { renderHook } from '@testing-library/react';

const { result } = renderHook(() => useTest({...}));
// expect : 검증 시작(이값이 ~ 일것이다 라고 검증 시작)
// toBe: 값 비교(정확히 같은 값인지 비교)
expect(result.current/hasChanges).toBe(true); 


expect(result).toBe(true); // "result가 true일 것이다"
expect(1 + 1).toBe(2);        // ✅ 통과
expect('hello').toBe('hello'); // ✅ 통과
expect([1, 2]).toBe([1, 2]);   // ❌ 실패 (다른 객체)

• 컴포넌트 렌더링 (render)
• Hooks 테스트 (renderHook)
• DOM 쿼리 (getByText, getByRole 등)
• 이벤트 시물레이션 (fireEvent)
• React 컨텍스트/Provider 지원

3. @testing-library/jest-dom : DOM 매처 확정

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

expect(element).toBeInTheDocument(); // "버튼이 화면에 있는가?"
expect(modal).toBeVisible(); //// "모달이 보이는가?"
expect(input).toHaveValue('test@example.com'); //"input에 'test@example.com' value가 있는가

• DOM 상태 검증 매처 제공 (Matcher : DOM 요소를 검증하는 함수들)
• toBeInTheDocument(), toHaveClass(), toBeVisible() 등
  • toBeInTheDocument() : 요소가 화면에 존재하는지 확인
  • toHaveClass() : 요소가 특정 CSS 크르래스를 가지고 있는지 확인
  • toBeVisible() : 요소가 화면에 보이는지 확인 (display: none이 아닌지)
• expect에 추가 매처 제공

4. @testing-library/user-evnet-사용자 이벤트 시물레이션

import userEvent from '@testing-library/user-event';

const user = userEvent.setup();
await user.type(input, 'test@example.com');
await user.click(button);

• 실제 사용자 동작에 가까운 이벤트 시물레이션
• fireEvnet보다 더 현실적인 동작
• 타이핑, 클릭, 키보드 입력 등

5. jsdom - 브라우저 환경 시물레이션 

// jsdom이 없으면 이 코드는 Node.js에서 실행 불가
const element = document.createElement('div');
element.textContent = 'Hello';
expect(element.textContent).toBe('Hello');

 

• window, document, DOM API 제공
• 브라우저 환경 없이 DOM 테스트 가능
• Vitest의 environment: 'jsdom' 설정에 사용

실제 사용 흐름

// 1. vitest로 테스트 정의
import { describe, it, expect } from 'vitest';

// 2. @testing-library/react로 hooks 테스트
import { renderHook } from '@testing-library/react';

// 3. @testing-library/jest-dom으로 DOM 검증
import '@testing-library/jest-dom';

// 4. @testing-library/user-event로 사용자 이벤트
import userEvent from '@testing-library/user-event';

// 5. jsdom이 브라우저 환경 제공 (자동)
// (vite.config.ts의 environment: 'jsdom' 설정)

---

2. vite.config.ts에 Vitest 설정 추가

• gloabls: true (전역 API 사용)
• enviroment: 'jsdom' (브라우저 환경 시물레이션)
• setupFiles 설정
• 커버리지 설정

3. 테스트 setup 파일 생성

• src/test/setup.ts 생성
• @testing-library/jest-dom 임포트
• 테스트 후 cleanup 설정

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

• test //watch 모드로 테스트 실행
• test:ui // UI 모드로 테스트 실행
• test:run //한번만 실행
• test:coverage //커버리지 포함 실행

 

5. 테스트 실행 확인: yarn test

---

2단계: 첫번재 테스트 파일 작성

예: src/hooks/useTest.test.ts 생성

import { describe, it, expect } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { useTest } from './useTest';

describe('useTest', () => {
  it('should return hasChanges as true when formData changes', () => {
    // 테스트 코드 작성
  });
});