cypress를 이용하여 components test 작성하기

Cypress의 컴포넌트 테스트로 Next.js 프로젝트에 테스트를 붙이는 과정을 설정부터 리팩터링까지 따라가는 글이다. 테스트를 쓰고 통과시키고 다듬는 순환을 todo 목록 예제로 반복한다. 테스트 가능한 코드를 위해 관심사를 셋으로 나누는 기준이 중간에 나온다.

핵심 포인트

컴포넌트 테스트를 쓰면 더 단순하고 유지보수하기 쉬우며 재사용 가능한 UI 조각을 만들게 된다.
설정은 개발 서버 플러그인 주입, 컴포넌트 폴더와 테스트 파일 패턴 지정 두 가지가 핵심이다.
당시 웹팩 5에서는 컴포넌트 테스트가 정상 동작하지 않는 부분이 있어 4로 낮춰야 했다.
테스트는 컴포넌트를 mount한 뒤 화면에 보이는 것을 기준으로 검증한다.
테스트 가능한 코드를 만들려면 표시, 부수 효과, 프로그램 로직 셋으로 관심사를 나눈다.
요소 선택에는 별도의 데이터 속성을 붙여 스타일이나 구조 변경에 영향받지 않게 한다.

상세 정리

전제 환경: Next.js 11 기준이며 Cypress와 리액트 어댑터, 개발 서버 패키지를 개발 의존성으로 설치한다.
초기화: Cypress를 한 번 열면 설정 파일이 생성된다.
플러그인 설정: 플러그인 진입점에서 Next.js용 개발 서버를 주입하고 설정을 반환한다.
폴더 규칙: 설정 파일에서 컴포넌트 테스트가 놓일 폴더와 테스트 파일 패턴을 지정한다.
번들러 제약: 프레임워크 설정에서 웹팩 5를 끄고 4를 쓰도록 낮춘다. 당시 5에서 컴포넌트 테스트가 제대로 돌지 않는 부분이 있었기 때문이다.
첫 테스트: 페이지 컴포넌트를 mount하고 특정 문구가 포함돼 있는지 확인하는 것으로 시작한다.
실행: 일반 실행과 별개인 컴포넌트 테스트 모드 명령으로 띄운다.
관심사 분리 기준: 표시와 UI를 맡는 부분, 입출력이나 네트워크 같은 부수 효과, 프로그램 로직과 비즈니스 규칙 셋으로 나누고 각각을 프레젠터와 컨테이너, 리듀서로 부른다.
예제 진행 방식: 테스트를 쓰고 통과하는 코드를 쓰고 리팩터링하는 순환을 반복한다.
1단계 테스트: 세 개의 할 일 데이터를 두고 목록의 자식 개수가 데이터 개수와 같은지 확인한다.
2단계 테스트: 자식을 순회하며 각 항목의 텍스트가 해당 데이터의 제목을 포함하는지 확인한다.
선택자 방식: 클래스나 태그 대신 테스트용 데이터 속성을 붙이고 그 속성으로 요소를 잡는다.
1단계 구현: 목록 컴포넌트가 배열을 받아 리스트 항목으로 펼치는 최소 형태로 테스트를 통과시킨다.
리팩터링 방향: 통과한 뒤 할 일 하나를 별도 컴포넌트로 분리하고 타입을 명확히 정의한다.
분리된 컴포넌트: 제목과 완료 여부를 받아 완료 상태에 따라 클래스와 스타일을 달리 적용한다.
반복의 의미: 각 단계마다 테스트가 먼저 있고 구현이 뒤따르므로 리팩터링해도 동작이 보장된다.
반복의 이점: 테스트가 먼저 있으니 구조를 바꿔도 기대 동작이 유지되는지 즉시 확인된다.
검증 관점: 내부 상태가 아니라 화면에 렌더링된 결과를 기준으로 보기 때문에 구현을 바꿔도 테스트가 잘 깨지지 않는다.