항해 플러스 프론트엔드 8 주차 회고

프론트엔드 테스트 코드 (feat: vitest, react testing library, TDD)

이번 챕터의 주제는 '테스트'이다.

 

테스트 코드는 '테스트 짤 시간이 어딨어.. ㅜㅜㅜㅜ' 하며, 언젠가는 해야할 일 리스트에 항상 있던 녀석이다. 이전에 토이 프로젝트에서 맛이라도 보자 싶어 jest를 써봤던 기억이 있는데, 이번 과제 진행에 조금이라도 도움이 됐었다.

 

이번 과제에선 통합테스트, 단위 테스트에 집중 했다. 과제 프로젝트의 규모가 시각적 회귀, e2e를 시도하기엔 턱없이 작았다. 그래도 e2e는 맛보기로 써보긴했다.

 

통합테스트를 진행하면서 가장 힘들었던점은 component를 렌더링하고 테스트하고 싶은 요소를 select하는 과정이 아닌가 싶다. ...ByText, Role, LabelText... 이런 조합으로 요소를 찾아가는데, 익숙하지 않으니 선택자를 이거 넣어보고 콘솔찍고 저거 넣고 콘솔찍고.. 수많은 삽질을 했다. 익숙해 진다면 금방 요소 선택을 하겠지만 당장은 큰 시간을 잡아먹었다. 

 

이렇게 작성한 테스트 코드.. 작성할때 까지만 하더라도 '왜 짜야하지.. ? 너무 개발이 늦어지는 거 아냐?' 라며 의문을 품었지만, 진면목은 코드를 리팩토링 할 때 느낄 수 있었다. 리팩토링을 하고나서 테스트 코드가 실패하면 리팩토링이 잘못된 것이기에, 왠지 알 수 없는 미궁속에 들어가는데, 끈을 허리에 묶고 들어가는 느낌을 주어서 좋았다. 어디가 잘못 됐는지 알수는 있기에, 이때 큰 장점을 느낄 수 있었다.

 

TDD는 너무 과하다는 느낌을 받았다. 사람마다 느끼는 정도는 다르겠지만 나는 답답함을 느꼈다. 이 간단한 코드 작성하는데 이렇게까지 해야해? 라는 생각이 계속 들었다. 'TDD는 하지 말 되 테스트를 많이 작성해라' 라는 구문이 딱 떠올랐다.

 

테스트 코드 작성하는데 오려걸렸는데 테스트 실행하고 파란불이 따다다닥 뜰 때 모든 힘듬이 보상받는 느낌이었다.