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

간단 소개

프론트엔드 테스트 코드 작성 경험을 공유하며, 테스트의 필요성, 효율적인 방법, 그리고 실제 적용 사례를 제시합니다.

AI Summary

프론트엔드 테스트의 딜레마와 필요성
- 프론트엔드 테스트 코드는 이론적으로 필요하지만, 실제 작성 시 비용 대비 효용에 대한 의문이 제기될 수 있음
- 펫프렌즈의 배송 메시지 구조 변경 중 발생한 이슈를 통해 테스트 코드의 필요성을 인식하고, 2025년 프론트엔드 챕터 목표와 연계하여 테스트 코드 커버리지 향상을 추진
- 테스트 컨벤션 정립 및 도메인 기반 테스트 문화 확산을 목표
테스트 코드 작성 및 피드백 반영 과정
- UI에 드러난 요소들을 중심으로 테스트 코드를 작성하되, 다양한 조건에 따른 복잡한 케이스들을 고려하여 효율적인 테스트 구성 방법을 고민
- DRY 원칙을 적용하여 코드 중복을 방지하고, describe 블록으로 테스트 시나리오를 그룹화하여 의도 전달력을 높임
- 테스트 코드 리뷰를 통해 하드코딩된 기준 시간 표현 개선, 컴포넌트 로직 커버 여부 점검, 기존 컴포넌트 변경에 대한 유연한 대처, 반복적인 구조에 each 활용 등의 피드백을 반영
최종 테스트 코드 및 결과
- data-testid 속성을 활용하여 렌더링 순서까지 검증하고, each를 활용하여 코드 중복을 최소화하고 가독성을 향상
- 테스트 코드 작성 결과, 기존 0%였던 컴포넌트 커버리지가 86.9%까지 상승
- 테스트 코드 작성을 통해 코드 품질 향상 및 개발 시야 확장