프론트엔드
E2E Test를 Cypress로 해보자.
두줄요약
React 카운터를 대상으로 Cypress 설치부터 data-cy 기반 요소 선택과 클릭 검증까지 소개했습니다. 브라우저 E2E 테스트와 Jest 단위 테스트를 분리하는 전략을 검토했습니다.
구조와 흐름
- React 카운터 컴포넌트에
data-cy속성으로 테스트 대상 식별 - Cypress 설치 후
cypress open스크립트로 실행 환경 구성 cy.visit,cy.get,click,should로 화면 방문·버튼 클릭·값 변경 검증
선택 이유
- 브라우저 실행 환경과 가까운 테스트 방식
- 단위·통합·E2E 테스트 지원 및 빠른 실행, 실시간 리로딩, 스택 추적 기반 디버깅
- CSS 태그·클래스 대신
data-cy,data-test,data-testid셀렉터 권장
적용해볼 점
- 브라우저 동작은 Cypress E2E 테스트로 검증
- 로직 단위 테스트는 Jest로 분리하는 테스트 전략 검토
- 모든 단위 테스트 작성 비용을 고려한 테스트 범위 선정
