테스트 코드 필요하나?

감사한 기회로 신입 프론트엔드 개발자로 입사하게 되었다.

현재 회사에서는 프론트엔드를 혼자 담당하고 있으며, 기존 코드베이스를 파악하는 과정에 있다.

사실 이전까지는 프론트엔드에서 테스트 코드의 필요성을 크게 체감하지 못했다.
하지만 최근 작업을 진행하면서 테스트 코드의 필요성을 느끼게 된 경험이 있었다.

계기

회사 서비스에는 상당히 많은 기능을 담당하는 페이지가 하나 있다.
해당 페이지는 여러 컴포넌트로 구성되어 있고, 각각 다양한 데이터를 기반으로 동작한다.

코드베이스를 정리하는 과정에서 불필요한 로직과 컴포넌트를 걷어내는 작업을 진행했다.

그런데 정리 작업 이후, 특정 컴포넌트에 표시되어야 할 데이터가 갑자기 비어버리는 문제가 발생했다.

아직 서비스 출시 전이라 큰 문제는 되지 않았지만, 만약 실제 서비스 중이었다면....흠흠

이 경험을 계기로 이런 문제를 자동으로 검증할 방법이 필요하다는 생각이 들었고, E2E 테스트를 도입해 보기로 했다.

E2E 테스트 시나리오

테스트는 사용자 흐름을 기반으로 작성했다.

실제 사용자가 서비스를 이용하는 과정을 따라가며

• 서버로부터 받은 데이터가 정상적으로 표시되는지
• 사용자 상호작용이 정상적으로 동작하는지

를 확인하는 방식으로 테스트 시나리오를 구성했다.

CI/CD

처음에는 다음과 같은 흐름을 생각했다.

PR 생성 → CI에서 테스트 실행 → 테스트 통과 시 merge

하지만 회사 개발 환경을 CI 환경에 그대로 올리기 어려운 상황이었기 때문에 일단은 로컬에서 테스트를 실행하는 방식으로 운영하기로 했다.

테스트 실행 → 통과 확인 → commit & push

Husky를 활용한 pre-push 테스트

로컬에서 테스트를 실행하는 것만으로는 실수로 테스트를 건너뛸 수 있다.
그래서 Husky의 Git Hook을 활용하기로 했다.

pre-push 훅에서 테스트를 실행하도록 설정하여

• 테스트 실패 시 git push 차단
• 테스트 성공 시에만 push 가능

하도록 구성했다.

결론

예상치 못한 사이드 이펙트를 위해 테스트 코드를 도입하는 것이 충분히 의미 있다는 생각이 들었다.

아직 테스트 커버리지가 충분하다고 말하기는 어렵지만,
앞으로 기능이 추가되거나 수정될 때 테스트 시나리오를 함께 확장해 나갈 생각이다.