프론트엔드‐테스트 전략

테스트 도구

Jest, RTL, Storybook, MSW

테스트 목적

예상되는 엣지케이스까지 처리하고 전반적인 코드 품질을 향상시킬 수 있는지 확인하기 위해 직접 작성한 논리를 테스트할 계획입니다. 또한, 코드 리팩토링 중에 기존 기능의 안정성을 향상시키기 위해 사용할 예정입니다.

저희가 필요하다고 생각하는 테스트코드만 작성할 예정입니다.

테스트 범위

❌테스트하지 않는 범위

UI 로직, 라이브러리 테스트, 간단한 로직은 테스트 하지 않을 예정입니다.

UI 로직 (jest, RTL render를 이용한 테스트)

UI 가 정상적으로 렌더링이 되었는지, 클릭 시 함수가 정상적으로 호출되었는지의 테스트는 테스트코드 작성에 들어가는 리소스 대비 이점을 보지 못한다고 생각하여 테스트하지 않을 예정입니다.

라이브러리 테스트

UI 로직에 대한 이유와 마찬가지로 react의 setState 가 정상적으로 값을 저장하는 지에 대한 테스트는 불필요하다고 생각하여 하지 않을 예정입니다.

정확히는 setState 가 상태값을 잘 저장했는 지가 아닌 특정 상황에서 setState가 정상적으로 호출 되어 정상적인 값을 가지고 있는지에 대한 테스트를 할 예정입니다.

간단한 로직 테스트

서버에서 응답받은 데이터를 불러와 렌더링하여 클릭 이벤트가 발생하는지에 대한 테스트 또는 간단한 사칙연산 테스트는 진행하지 않을 예정입니다.

⭕테스트하는 범위

복잡한 커스텀 훅 테스트

서버에서 받은 데이터를 2차 가공하거나, 커스텀 훅 로직을 한 눈에 파악하기 힘든 로직의 경우 테스트 진행을 할 예정입니다. 주석으로 코드를 설명하는 대신 테스트 명세를 이용하여 정확히 어떤 경우 어떤 처리가 일어나여 응답하는지를 확인할 수 있도록 테스트를 작성할 예정입니다.

스토리북 UI 테스트

컴포넌트 단위가 잘 나뉘었는지 테스트할 수 있으며, 다른 크루가 리뷰 시 css 코드와 함께 스토리북 결과를 보며 리뷰를 진행할 수 있기에 서로 리뷰하기 편하다고 생각하여 storybook 도입을 했습니다.

또한 컴포넌트들을 스토리북에 업로드하여 만약 재사용할 수 있는 컴포넌트가 있는지 확인하여 이미 만들어진 컴포넌트를 쉽게 찾아 재사용할 수 있도록 하여 프로젝트가 장기로 진행이 될 수록 개발 리소스를 줄일 수 있다고 생각하여 스토리북을 이용한 컴포넌트 UI 테스트를 진행하고 있습니다.