카카오 FE, Vue 컴포넌트 테스트 작성법과 리팩토링 전략 공유

카카오 FE 플랫폼 팀이 운영 중인 'Kakao for Business' 프로젝트의 Vue 컴포넌트 테스트 작성 경험과 리팩토링 전략을 공유했다. 테스트 환경으로는 ava 프레임워크와 sinon, vue-test-utils를 사용했으며, 테스트 더블(stub)을 활용해 API 응답을 모킹하고 전역 객체 오염을 방지하는 restore 로직을 적용했다.

특히 템플릿 내부의 로직을 computed 속성으로 분리해 테스트 유지보수성을 높이는 방식을 제안했다. 뷰의 변화율이 높은 DOM 구조는 스냅샷 테스트나 E2E 테스트로 책임을 넘기고, 단위 테스트에서는 데이터 변화에만 집중하는 전략을 취했다. 또한 부모-자식 컴포넌트 간 테스트 시 shallowMount를 사용해 자식 컴포넌트를 스텁 처리함으로써 독립적인 테스트가 가능하도록 했다. 이 과정을 통해 테스트 친화적인 코드 구조의 중요성을 깨닫고, 기존 코드를 망가뜨리지 않으면서 테스트와 리팩토링을 병행하는 방법을 모색했다.