testing · high priority
프론트엔드 테스팅 실전
Vitest + RTL + Playwright — 실무 테스팅 전략
intermediate 난이도5시간토스당근카카오네이버배민
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“자동차 검사”
단위 테스트는 각 부품(엔진, 브레이크)을 따로 검사하는 것, 통합 테스트는 부품들이 함께 잘 작동하는지 확인하는 것, E2E는 실제 도로를 달려보는 것입니다. 모든 부품이 합격해도 조립이 잘못되면 차가 안 움직일 수 있습니다.
핵심 개념
테스트 유형 비교
| 유형 | 도구 | 속도 | 비용 | 확인 범위 |
|---|---|---|---|---|
| 단위 테스트 | Vitest, Jest | 매우 빠름 (ms) | 낮음 | 순수함수, 컴포넌트 단독 |
| 통합 테스트 | RTL + MSW | 빠름 (초) | 중간 | 컴포넌트 조합, 사용자 흐름 |
| E2E 테스트 | Playwright, Cypress | 느림 (분) | 높음 | 실제 브라우저, 전체 흐름 |
실무 적용
어떤 상황에서 사용하는가
새 기능 개발 시 테스트 전략 수립
어떻게 적용하는가
RTL로 핵심 인터랙션 테스트 + MSW로 API 응답 Mocking + Playwright로 핵심 사용자 흐름(로그인, 결제) E2E 테스트. CI 파이프라인에 단위/통합은 PR마다, E2E는 main 병합 전 실행.
흔한 실수와 안티패턴
- 구현 세부사항(컴포넌트 내부 state) 테스트 — 리팩터링 시 테스트가 깨짐
- fireEvent 대신 userEvent를 써야 실제 사용자 동작과 유사
- E2E를 너무 많이 작성해 CI가 느려짐
- MSW 없이 fetch를 직접 mock — 실제 HTTP 요청 생명주기를 테스트 못함
면접 질문
중급토스당근카카오
답변 방향 힌트
RTL 철학 vs Enzyme 철학
반드시 언급할 키워드
- 구현 테스트 vs 행동 테스트
- 컴포넌트 내부 state 접근
- React 18+ 지원
예상 꼬리 질문
- getByRole과 getByTestId 중 어느 것을 우선해야 하나요?
- Storybook을 테스트에 활용하는 방법은?