테스트 코드는 일정에 쫓기면 가장 먼저 밀려나지만, 프로젝트가 커질수록 "미래의 큰 버그를 지금의 작은 실패로" 앞당겨 주는 안전망이 된다. 프론트엔드에서도 Vitest·Jest와 Testing Library, MSW, Playwright로 컴포넌트와 상태 로직, 사용자 흐름까지 충분히 테스트할 수 있다.
노트
- 프론트엔드에서의 TDD: TDD의 목표와 사이클, 이점과 오해, 테스트하기 좋은 코드, user-event 예제, 도입 전략
- 접근성 기반 UI 테스트 자동화: role·접근 가능한 이름으로 요소 찾기, aria 속성 활용, 헤드리스 컴포넌트, 인수·회귀 테스트
- 프론트엔드 테스트의 종류와 도구: 정적·단위·통합·E2E 층, 폴더 역할별 테스트 단위, 테스트 대역 구분, 행위 중심 검증, Vitest·Testing Library·MSW·Playwright
- 험블 객체 패턴: 목의 비용 피라미드, 테스트하기 어려운 입출력을 얇은 객체로 떼어 내는 설계와 SOLID
- JavaScript 테스트 모범 사례: 황금률, 테스트 이름·AAA·블랙박스, 테스트 대역 고르기, 미스터리 게스트, 프로퍼티 기반 테스트·스냅숏, E2E 원칙, 백엔드 컴포넌트 테스트·HTTP 가로채기·검증할 결과 다섯 가지·DB 정리 전략, 커버리지와 뮤테이션 테스트, CI
- 테스트 실행 환경: Node, DOM 에뮬레이션, 실제 브라우저: 런타임과 API, 로직 분리, jsdom·happy-dom의 한계, Playwright·Vitest 브라우저 모드
- 테스트를 돌리는 시점: 로컬, PR, CI: test 스크립트, watch·only, 상태 검사, 플레이키 테스트, 되돌리기와 앞으로 고치기, 경보 피로, 파일별 커버리지·테스트 파일 제외·타임존 고정
- 테스트의 기본 요소: 단언 3종, assert와 expect, suite·describe, 수명 주기 훅, 테스트 파일 위치
- 의존성이 있는 컴포넌트 테스트하기: vi.stubGlobal, vi.mock, Context 주입, MSW로 넘어갈 시점
- API 모킹: MSW와 json-server: 코드 속 가짜 데이터·가짜 REST 서버·MSW 비교, MSW 2 핸들러와 브라우저·Node 설정, 테스트별 핸들러 교체
- 정적 분석: 실행하지 않고 검사하기: ESLint 규칙, eslint-plugin-compat, TypeScript noImplicitAny, 런타임 데이터의 한계
- Storybook: 컴포넌트를 상태별로 떼어 보는 도구: CSF3 스토리와 args, 3단계 설정과 decorators, Controls·Actions·Viewport, Meta·StoryObj 타입, 스토리를 테스트로