[2019] 실용적인 프런트엔드 테스트 전략

테스트의 기본 형식인 입력→출력 검증을 백엔드와 대비한다. 프론트엔드는 입력 데이터는 목킹으로 만들기 쉽지만, 출력이 시각적 데이터(픽셀)로 바뀌는 것이라 코드만 보고 결과를 예측하기 어렵다는 근본적 어려움을 설명한다.

HTML/CSS 구조 비교나 스냅샷은 리팩터링에 취약하고 신뢰를 주지 못한다고 지적한다. puppeteer로 스크린샷을 찍어 이전 이미지와 비교하는 시각적 회귀 테스트와, 브라우저별로 실행해주는 applitools 같은 도구의 필요성을 설명한다.

시각적 테스트로는 기능이 왜 깨졌는지 알기 어려우니, 시각과 기능 테스트를 분리해야 한다고 강조한다. 부모·자식 셀렉터로 테스트하면 구조 변경에 쉽게 깨지므로 test-id를 별도로 두어 견고하게 작성하는 방법을 소개한다.

컴포넌트를 전체 앱에서 빼내 격리 개발하는 스토리북을 소개한다. 원하는 케이스를 엔트리 포인트로 등록해 빠르게 확인하고, 저장 즉시 상태가 바뀌는 개발 편의와 함께 시각 검증·회귀 테스트 도구 연동까지 가능함을 설명한다.

리덕스 등에서 모델별로 목킹만 하는 단위 테스트는 실제 코드를 그대로 복제하는 반복적 테스트가 되기 쉽다고 지적한다. 테스트도 작성·유지·실행 비용이라는 관점에서, 복잡한 모듈 위주로 단위 테스트를 최소화할 것을 제안한다.

브라우저 안에서 도는 사이프레스(Cypress)로 쇼핑몰 예제를 테스트하는 과정을 시연한다. 셀레늄과 달리 빠르고, 비포·애프터 상태와 네트워크 요청 이력이 남아 디버깅이 편하며, 서버 목킹으로 프론트엔드 단독 TDD가 가능함을 보여준다.

테스트가 신뢰를 주는지 늘 자문하고 신뢰 없는 테스트는 최소화하라고 강조한다. 시각과 기능 테스트를 개념적으로 분리하고, 스토리북·시각 테스트를 적극 쓰되 단위·통합·E2E를 보조로 조합하는 실용 전략으로 발표를 마무리한다.