E2E Test를 Cypress로 해보자.

React 프로젝트에 Cypress 를 붙여 E2E 테스트를 처음 작성해 보는 입문 글이다. Cypress 의 특징을 짚은 뒤 CRA 프로젝트에 설치하고, 카운터 컴포넌트를 대상으로 `data-cy` 선택자를 붙여 클릭 전후 값을 검증하는 테스트를 만든다.

핵심 포인트

상세 정리

도구 성격: 오픈소스이며 테스트 실행을 추적하는 대시보드가 붙은 유료 버전도 있다.
작성 언어: JavaScript 로 만들어졌고 Cypress 메서드로 실행되므로 JavaScript 를 몰라도 사용에 큰 문제가 없다고 소개한다.
테스트 프레임워크로 Mocha 와 Chai 를 쓴다.
개발 편의: 실시간 리로딩을 제공하고 실행 속도가 빠르며, 에러가 나면 스택 추적으로 디버깅하기 수월하다.
준비: CRA 로 React 프로젝트를 만들고 Cypress 를 설치한다. lint 설정은 전용 plugin 을 설치해 처리하면 된다.
선택자 준비: 테스트할 요소에 `data-cy` 를 붙인다. 예제에서는 카운트 값 표시 영역에 `countvalue`, 증가 버튼에 `increase` 를 지정한다.
테스트 구조: `describe("카운터 test", ...)` 안에 `it("홈페이지 방문", ...)` 을 두는 Mocha 스타일이다.
검증 흐름: 버튼 클릭 전 `countvalue` 의 텍스트가 0 인지 확인하고, `increase` 요소를 변수에 담아 클릭한 뒤 텍스트가 1 이 되는지 확인한다.
실행하면 Cypress 러너 화면에서 각 단계의 실행 결과를 눈으로 따라갈 수 있다.