Cypress 및 GH Actions를 사용하여 React에서 E2E 테스트를 녹음합니다.

TDD를 배우고 강력하고 탄력적인 앱을 만드는 과정에서 마침내 종단 간 테스트를 배웠습니다. cypress.io를 사용하여 React Login Mock 앱에 e2e 테스트 케이스를 추가했습니다.

I would like to add that cypress provide great developer experience.

이것이 녹음의 모습입니다. 아래 기록에서 두 가지 테스트 사례를 실행하고 있습니다.

유효한 사용자 자격 증명으로 로그인 시도가 성공했습니다.

서버가 오류로 응답할 때 오류 처리.

내 워크플로우

cypress를 사용하여 내 프로젝트에 종단 간 테스트 사례를 추가하고 확신을 가지고 앱을 개발한 후 내 프로젝트에서 발생하는 모든 코드 변경도 e2e 테스트를 거치고 있는지 확인하고 싶었습니다. Cypress 헤드리스 실행 덕분에 저는 Cypress Github Action을 사용하여 모든 코드 푸시 및 풀 요청에 대해 내 코드를 e2e 테스트할 수 있었습니다.

...

- name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          browser: chrome
          headless: true
          record: true
          start: npm start
          wait-on: http://localhost:3000
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

...

Cypress Github Action을 사용하면 테스트 실행을 기록하고 이를 Cypress 대시보드에 업로드할 수도 있습니다.

제출 카테고리:

메인테이너 머스트 해브, DIY 배포

코드 링크

cypress 테스트 사례와 함께 프로젝트를 찾을 수 있습니다.

dreamer01 / 반응-로그인-모의

입력 유효성 검사 및 단위 테스트 사례가 포함된 React 로그인 모의 페이지입니다.

추가 리소스/정보

cypress-io / github-액션

Cypress 종단 간 테스트를 실행하기 위한 GitHub 작업

Cypress.io blog post on Github Action