1. 유닛 테스트 (Unit Testing)
개별 함수나 컴포넌트의 동작을 독립적으로 검증하는 테스트 방법으로 주요 도구로 Jest, Vitest, Mocha가 있습니다.
장점
빠른 실행 속도.
디버깅 용이, 코드 단위 문제 식별.
단점
시스템 통합 문제 감지 불가.
전체 흐름 검증 어려움.
2. 통합 테스트 (Integration Testing)
컴포넌트나 모듈 간 상호작용을 테스트하여 통합 동작 확인하는 테스트 방법으로 주요 도구로 Jest, React Testing Library, Vitest가 있습니다.
장점
컴포넌트 간 연결 문제 조기 발견.
E2E보다 빠르고 유지보수 쉬움.
단점
전체 사용자 흐름 미포함.
설정이 유닛 테스트보다 복잡.
3. E2E 테스트 (End-to-End Testing)
사용자 관점에서 전체 애플리케이션 흐름(예: 로그인 → 결제)을 테스트 방법으로 주요 도구로 Cypress, Playwright, Puppeteer가 있습니다.
장점
실제 사용자 경험 검증.
배포 전 치명적 버그 예방.
단점
느린 실행 속도.
유지보수 비용 높음.
4. 스냅샷 테스트 (Snapshot Testing)
컴포넌트의 렌더링 결과를 스냅샷으로 저장하고 변경 감지하는 테스트 방법으로 주요 도구로 Jest, Storybook가 있습니다.
장점
UI 변화 빠르게 감지.
작성 및 실행 간단.
단점
동적 UI 테스트에 부적합.
스냅샷 검토 필요.
5. 비주얼 리그레션 테스트 (Visual Regression Testing)
화면의 시각적 출력을 비교하여 UI 변화(예: 레이아웃 깨짐) 감지하는 테스트 방법으로 주요 도구로 Percy, Chromatic, Playwright가 있습니다.
장점
시각적 버그 효과적 탐지.
사용자 경험에 직접적 영향 점검.
단점
실행 속도 느림.
작은 픽셀 차이로 오탐지 가능.
6. 접근성 테스트 (Accessibility Testing)
WCAG 표준 준수 여부를 확인해 모든 사용자의 접근성 보장하는 테스트 방법으로 주요 도구로 axe-core, Lighthouse, WAVE가 있습니다.
장점
포괄적 사용자 경험 제공.
법적/윤리적 요구사항 충족.
단점
수동 검증 필요.
완전 자동화 불가.
7. 퍼포먼스 테스트 (Performance Testing)
로딩 속도, 렌더링 성능 등 애플리케이션 성능 측정하는 테스트 방법으로 주요 도구로 Lighthouse, WebPageTest, React Profiler.가 있습니다.
장점
사용자 이탈 감소(빠른 로딩).
성능 병목 지점 식별.
단점
다양한 환경 테스트 필요.
분석 복잡.
테스트 방법 비교 표
| 테스트 방법 설명 | 주요 도구 | 장점 | 단점 |
|---|---|---|---|
| 유닛 테스트 | 개별 함수/컴포넌트 검증 | Jest, Vitest, Mocha | 빠름, 디버깅 용이 |
| 통합 테스트 | 컴포넌트 간 상호작용 검증 | Jest, React Testing Library | 연결 문제 발견, E2E보다 빠름 |
| E2E 테스트 | 전체 사용자 흐름 검증 | Cypress, Playwright, Puppeteer | 사용자 경험 보장, 배포 리스크 감소 |
| 스냅샷 테스트 | UI 렌더링 변화 감지 | Jest, Storybook | 빠르고 간단, UI 변화 감지 |
| 비주얼 리그레션 | 시각적 출력 비교 | Percy, Chromatic, Playwright | 시각적 버그 탐지, UI 일관성 보장 |
| 접근성 테스트 | WCAG 표준 준수 확인 | axe-core, Lighthouse, WAVE | 포괄적 경험, 법적 요구사항 충족 |
| 퍼포먼스 테스트 | 로딩/렌더링 성능 측정 | Lighthouse, WebPageTest | 사용자 이탈 감소, 병목 식별 |
