Testing concerns

컴포넌트 테스트는 격리와 실제 사용자 관찰 사이의 균형이 중요하다

모든 의존성을 실제로 붙이면 느려지고, 모든 것을 mock하면 사용자가 보는 실패를 놓칩니다. 경계별로 무엇을 가짜로 둘지 정합니다.

고려사항
왜 필요한가
테스트에서 할 일
주의 신호
격리
테스트 간 상태가 섞이면 실패 원인이 흐려짐
beforeEach/afterEach로 저장소와 mock을 초기화
순서에 따라 성공/실패가 바뀜
외부 의존성 mock
API, router, Context가 테스트를 불안정하게 만듦
Provider 값, useRouter, API 응답을 필요한 만큼만 대체
mock이 실제 화면 계약을 숨김
Server Component 경계
서버 컴포넌트는 RTL에서 직접 다루기 어려움
서버 데이터를 props로 받은 클라이언트 컴포넌트를 검증
데이터 fetching까지 한 테스트에 섞음
CSS 처리
Jest 환경은 실제 CSS 레이아웃이 아님
CSS module은 mapper로 안정화하고 레이아웃은 브라우저 테스트로 보완
클래스 문자열만 검증함
스냅샷
큰 DOM 변경을 빠르게 감지할 수 있음
의도가 분명한 작은 컴포넌트에 보조로 사용
스냅샷 업데이트가 습관이 됨
핵심: 컴포넌트 테스트의 주 증거는 내부 state가 아니라 사용자가 볼 수 있는 텍스트, role, 상태 변화입니다.