Vitest 테스트 실행 프로세스 정리

1. 전체 흐름 요약

1) vite.config.ts 로드
2) setup.ts 실행
3) 테스트 파일 로드 + Mock 적용
4) beforeEach 실행
5) 개별 테스트(it) 실행
6) afterEach → cleanup

---

2. 설정 단계 – vite.config.ts

test: {
  globals: true,
  environment: 'jsdom',
  setupFiles: './src/test/setup.ts',
}

역할

• JSDOM 환경 제공
• 전역 테스트 API 활성화
• 테스트 실행 전에 setup 파일 실행

---

3. Setup 단계 — src/test/setup.ts

import '@testing-library/jest-dom';
import { cleanup } from '@testing-library/react';

afterEach(() => {
  cleanup();
});

역할

• DOM 매처(jest-dom) 확장
• 테스트 종료 후 DOM 자동 정리(cleanup)

---

4. 테스트 파일 구조 이해하기

4-1. Mock 설정 (파일 상단)

vi.mock('react-i18next');
vi.mock('@utils/fileUpload');
vi.mock('@components/toast');

역할

• 외부 의존성을 격리
• 네트워크, UI, i18n 등 불필요한 실제 동작 제거

---

4-2. 테스트 그룹 설정

describe('useMyForm', () => {
  const defaultProps = { /* 테스트용 기본 props */ };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  afterEach(() => {
    vi.restoreAllMocks();
  });
});

역할

• 테스트 간 부작용 제거
• 공통적으로 필요한 Mock/전역값 초기화

---

4-3. 실제 테스트 실행 패턴

✔︎ 상태 변경 테스트

it('should detect changes', () => {
  const { result } = renderHook(() => useMyForm(defaultProps));

  act(() => {
    result.current.handleFieldChange('name', '새 이름');
  });

  expect(result.current.hasChanges).toBe(true);
});

✔︎ 비동기 테스트

it('should save successfully', async () => {
  const { result } = renderHook(() => useMyForm(defaultProps));

  await act(async () => {
    await result.current.handleSave();
  });

  expect(result.current.onSave).toHaveBeenCalled();
});

✔︎ 예외 케이스

it('should block save when validation fails', async () => {
  const { result } = renderHook(() => useMyForm(defaultProps));

  act(() => {
    result.current.handleFieldChange('name', '');
  });

  await act(async () => {
    await result.current.handleSave();
  });

  expect(result.current.onSave).not.toHaveBeenCalled();
});

---

5. Vitest 실제 실행 흐름

[테스트 시작]
  ↓
setup.ts 실행 (jest-dom + cleanup 등록)
  ↓
테스트 파일 로드 → vi.mock 적용
  ↓
describe 실행 → beforeEach 실행
  ↓
it(테스트) 실행
  1. renderHook() → Hook 렌더링
  2. act() → 상태 업데이트
  3. expect() → 결과 검증
  ↓
afterEach 실행 → restore + cleanup
  ↓
다음 테스트로 이동

개발할 때 마주치는 대부분의 문제는

• mock 순서
• setup 파일 누락
• cleanup 누락
  이 흐름을 이해하면 쉽게 해결됩니다.

---

6. 실행 명령어

# 실시간 테스트
yarn test

# 단발성
yarn test:run

# 특정 파일
yarn test:run src/hooks/useMyForm.test.ts

# 커버리지
yarn test:coverage

---

결론

각단계 파일들의 역

설정	vite.config.ts	테스트 환경 구성
Setup	setup.ts	jest-dom, cleanup
Mock	테스트 파일 상단	외부 의존성 격리
beforeEach	describe 내부	Mock 초기화
it 테스트	테스트 본문	Hook 렌더링 → 액션 → 검증
afterEach	describe 내부	Mock 복원 + cleanup