Vitest 완벽 가이드 | Vite 네이티브 테스트·빠른 속도·Jest 호환·실전 활용
이 글의 핵심
Vitest로 빠른 테스트를 구현하는 완벽 가이드입니다. Vite 네이티브 통합, Jest 호환, UI 모드, Coverage까지 실전 예제로 정리했습니다.
실무 경험 공유: Jest에서 Vitest로 전환하면서, 테스트 실행 속도가 5배 빨라지고 설정이 간소화된 경험을 공유합니다.
들어가며: “Jest가 느려요”
실무 문제 시나리오
시나리오 1: 테스트가 너무 느려요
Jest는 느립니다. Vitest는 5배 빠릅니다.
시나리오 2: Vite와 설정이 달라요
이중 설정이 필요합니다. Vitest는 Vite 설정을 공유합니다.
시나리오 3: ESM 지원이 부족해요
Jest는 ESM이 불안정합니다. Vitest는 완벽히 지원합니다.
1. Vitest란?
핵심 특징
Vitest는 Vite 네이티브 테스트 프레임워크입니다.
주요 장점:
- 빠른 속도: Jest보다 5배 빠름
- Vite 통합: 설정 공유
- Jest 호환: API 동일
- ESM: 완벽한 지원
- UI 모드: 시각적 테스트
2. 설치 및 설정
설치
npm install -D vitestvite.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
setupFiles: './tests/setup.ts',
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
},
},
});package.json
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:coverage": "vitest --coverage"
}
}3. 기본 테스트
유닛 테스트
// src/utils/math.test.ts
import { describe, it, expect } from 'vitest';
import { add, multiply } from './math';
describe('Math utils', () => {
it('add 함수', () => {
expect(add(1, 2)).toBe(3);
expect(add(-1, 1)).toBe(0);
});
it('multiply 함수', () => {
expect(multiply(2, 3)).toBe(6);
expect(multiply(0, 5)).toBe(0);
});
});비동기 테스트
// src/api/users.test.ts
import { describe, it, expect } from 'vitest';
import { fetchUser } from './users';
describe('fetchUser', () => {
it('사용자 데이터를 가져온다', async () => {
const user = await fetchUser(1);
expect(user).toEqual({
id: 1,
name: 'John',
email: '[email protected]',
});
});
});4. Mocking
함수 Mock
import { describe, it, expect, vi } from 'vitest';
describe('Mocking', () => {
it('함수 mock', () => {
const mockFn = vi.fn();
mockFn('hello');
expect(mockFn).toHaveBeenCalledWith('hello');
expect(mockFn).toHaveBeenCalledTimes(1);
});
it('반환값 mock', () => {
const mockFn = vi.fn().mockReturnValue('mocked');
expect(mockFn()).toBe('mocked');
});
});모듈 Mock
import { describe, it, expect, vi } from 'vitest';
vi.mock('./api', () => ({
fetchUser: vi.fn().mockResolvedValue({
id: 1,
name: 'John',
}),
}));
import { fetchUser } from './api';
describe('User service', () => {
it('사용자를 가져온다', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('John');
});
});5. React Testing
설치
npm install -D @testing-library/react @testing-library/user-event jsdom컴포넌트 테스트
// src/components/Counter.test.tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';
describe('Counter', () => {
it('초기값이 0이다', () => {
render(<Counter />);
expect(screen.getByText('Count: 0')).toBeInTheDocument();
});
it('버튼 클릭 시 증가한다', async () => {
const user = userEvent.setup();
render(<Counter />);
await user.click(screen.getByRole('button', { name: 'Increment' }));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
});6. UI 모드
npm run test:ui기능:
- 시각적 테스트 실행
- 실시간 결과 확인
- 필터링 및 검색
- 코드 커버리지 시각화
7. Coverage
npm install -D @vitest/coverage-v8
npm run test:coverage출력:
File | % Stmts | % Branch | % Funcs | % Lines
--------------------|---------|----------|---------|--------
All files | 85.5 | 78.2 | 90.1 | 85.5
utils/math.ts | 100.0 | 100.0 | 100.0 | 100.0
api/users.ts | 75.0 | 60.0 | 80.0 | 75.0정리 및 체크리스트
핵심 요약
- Vitest: Vite 네이티브 테스트
- 빠른 속도: Jest보다 5배 빠름
- Jest 호환: API 동일
- ESM: 완벽한 지원
- UI 모드: 시각적 테스트
- Coverage: v8 기반
구현 체크리스트
- Vitest 설치
- 설정 파일 작성
- 유닛 테스트 작성
- Mocking 구현
- React 테스트 작성
- UI 모드 활용
- Coverage 확인
같이 보면 좋은 글
- Jest 테스트 가이드
- Playwright 완벽 가이드
- Vite 5 완벽 가이드
이 글에서 다루는 키워드
Vitest, Testing, Vite, Jest, Unit Test, Frontend, Performance
자주 묻는 질문 (FAQ)
Q. Jest에서 마이그레이션이 쉬운가요?
A. 네, API가 거의 동일해서 간단합니다. 대부분 설정만 바꾸면 됩니다.
Q. Jest보다 정말 빠른가요?
A. 네, 실제로 5배 이상 빠릅니다. HMR 덕분에 watch 모드가 특히 빠릅니다.
Q. React Testing Library를 사용할 수 있나요?
A. 네, 완벽하게 호환됩니다.
Q. 프로덕션에서 사용해도 되나요?
A. 네, Vite, Nuxt, SvelteKit 등 많은 프로젝트에서 사용합니다.