CI/CD - Cypress 및 Jest/RTL을 사용한 React 앱 템플릿 - Github 작업

내 워크플로우



모든 React 프로젝트의 템플릿으로 사용할 수 있는 저장소입니다. 컨텍스트 공급자 및 소비자가 이미 구성되었습니다.
Github Actions을 파이프라인으로 사용하여 테스트 e2e용 스냅샷, 단위 테스트용 Jest/React Testing Library와 함께 Cypress를 사용하여 CI/CD 작업을 수행하고 eslint 규칙도 확인합니다.

주요 패키지 및 버전:
  • 반응: 17.0.2
  • react-router-dom: 6.0.2
  • 스타일 구성 요소: 5.3.3
  • 에스린트: 7.22.0
  • 더 예쁘다: 2.5.0
  • 사이프러스: 9.1.0
  • cypress-플러그인-스냅샷: 1.4.4

  • 제출 카테고리:



    DIY 배포

    Yaml 파일 또는 코드 링크




    실린데87 / React-app-template-with-testing-and-pipeline






    Github의 Actions 파이프라인이 포함된 React 템플릿


    모든 React 프로젝트의 템플릿으로 사용할 수 있는 저장소입니다. 컨텍스트 공급자 및 소비자가 이미 구성됨
    Github Actions를 파이프라인으로 사용하여 테스트 e2e용 스냅샷과 함께 Cypress를 사용하는 CI/CD 작업, 단위 테스트용 Jest/React Testing Library 및 eslint 규칙 확인도 수행합니다.

    사용 가능한 스크립트

    yarn install
    
    npm 종속성을 설치합니다.
    yarn start
    
    개발 모드에서 앱을 실행합니다. 브라우저에서 보려면 http://localhost:3000을 여십시오.
    수정하면 페이지가 다시 로드됩니다. 또한 콘솔에 린트 오류가 표시됩니다.
    yarn test
    
    대화형 감시 모드에서 단위 테스트 러너(Jest/RTL)를 시작합니다.
    yarn test:coverages
    
    단위 테스트 러너(Jest/RTL)를 시작하고 테스트 커버리지 보고서를 표시합니다.
    yarn cy:open:local
    
    스냅샷이 꺼진 상태로 http://localhost:3000에서 e2e Test Runner(Cypress) 실행
    URL 및 PREVIEW_ENV 플래그를 사용하도록 변경…

    View on GitHub

    추가 리소스/정보



    github의 action yml 파일은 .github/workflows 폴더에 있으며 세 개의 파일로 구성되어 있습니다. 하나는 테스트용, 하나는 보푸라기용, 마지막 하나는 앱 빌드용입니다.

    읽어 주셔서 감사합니다. 피드백을 부탁드립니다.

    좋은 웹페이지 즐겨찾기