프론트엔드 테스트 비용과 효용 사이에서

문제 상황

• 프론트엔드 테스트의 작성 비용과 실제 효용 사이의 고민
• 배송 정보 렌더링 로직에서 하드코딩된 시간값과 날짜 기준 차이로 인한 테스트 불안정
• 단순 존재 여부 검증만으로는 렌더링 순서와 핵심 로직을 충분히 보장하지 못하는 한계

원인 분석

• 테스트 대상 컴포넌트 밖 유틸 함수를 함께 호출하며 관심사가 흐려짐
• 현재 시각에 의존하는 로직과 고정 mockData의 기준 불일치
• toBeInTheDocument 중심 검증으로 인한 얕은 테스트 구성

해결 방법

• jest fake timers와 setSystemTime으로 테스트 기준 시각 고정
• render 공통화, each 기반 반복 구조 정리, 중복 mock 헬퍼 분리
• data-testid와 within을 활용해 렌더링 순서와 옵션별 노출 결과 검증

적용해볼 점

• 핵심 도메인과 변동성이 큰 UI를 구분해 테스트 범위 선택
• 실패 케이스와 렌더링 순서까지 포함한 검증 설계
• 테스트를 계기로 컴포넌트 리팩토링과 컨벤션 정립 검토