Cypress를 이용한 React E2E테스트
본 프로젝트는 blackcoffee-study/js-counter-test 레포지토리를 기반으로 만들었습니다.
E2E 도구인 Cypress로 테스트를 수행해 보기 위한 간단한 Counter App
기능 명세대로 기능이 동작하는지 테스트합니다.
- Counter는 초기값 0 부터 시작한다.
-
+버튼을 클릭하면 Count가 1 증가하여 표시된다. -
-버튼을 클릭하면 Count가 1 감소하여 표시된다. - Count는 최소 0, 최대 5까지만 표시된다.
- 최소, 최대 범위를 넘어 클릭이벤트가 발생하면 alert이 표시된다.
- Reset 버튼을 클릭하면 Count가 0으로 초기화된다.
npx create-react-app . 으로 현재 디렉토리에 React App을 생성하여 진행한 프로젝트 입니다.
dev dependency로 설치
npm install --save-dev cypress실행
./node_modules/.bin/cypress open첫 실행시에는 시간이 소요될 수 있다.
기본으로 설치된 샘플들을 확인하고, 테스트해 볼 수 있다.
파일명의 .spec.js는 이 제품의 사양(specification)이 어떻게 되는지 알려주는 테스트파일이라는 의미이다.
원하는 테스트파일을 클릭하여 테스트를 실행할 수 있다.
✅ test/cypress 브랜치에서 확인(./cypress/itegration/counter.spec.js)이 가능합니다.
테스트가 올바르게 실행된 화면
상세 확인이 가능합니다.
✅ 이 레포지토리를 clone 하여 자유롭게 사용하셔도 됩니다.