프론트엔드 테스트, 비용 vs 효용? 펫프렌즈 개발자의 솔직한 이야기
by DD
11개월 전
조회수 6
프론트엔드 테스트의 효용성에 대한 의문과 실제 작성 경험 공유
배송 정보 컴포넌트 테스트 코드 작성 및 리팩토링 과정 설명
테스트 커버리지 86.9% 달성, 코드 신뢰도 향상 및 유지보수성 개선
테스트 코드 작성의 시작: 검증 포인트 정의
구체적으로 UI 화면에서 검증할 부분을 먼저 정의하고, 각 배송 옵션에 대한 라벨과 시간 관련 문구를 중심으로 테스트 코드를 작성했다. 따라서, DRY 원칙을 적용하여 코드 중복을 줄이고, describe 블록을 활용하여 테스트의 가독성을 높였다.
테스트 코드 리팩토링: 피드백 반영 및 개선
테스트 코드 리뷰를 통해 하드코딩된 값 개선, 컴포넌트 로직 커버 여부 점검, 기존 컴포넌트 변경에 대한 유연한 접근, 반복적인 구조에 대한 each 활용 등 다양한 피드백을 반영했다. 반면, data-testid를 활용하여 렌더링 순서까지 검증하도록 개선했다.
테스트 코드의 가치: 신뢰할 수 있는 코드
결과적으로 테스트 커버리지 86.9%를 달성하여 코드의 신뢰도를 높이고, 유지보수성을 향상시켰다. 따라서, 실패를 설계하고, CI에서 테스트가 깨지는 경험을 통해 테스트의 중요성을 인식했다. 또한, 테스트 코드는 끊임없는 고민의 연속임을 강조했다.
