측백나무를 다음 나무에 빠르게 추가하는 방법.js 응용

7324 단어 reactjavascriptbeginnersnextjs
..너는 아마도 다음 문장에 우스갯소리를 넣는 것에 관한 이 지침을 좋아할 것이다.js 응용 프로그램.측백나무와 결합하면 이것은 위대한 설정이다!😃

다음 우스갯소리를 어떻게 빨리 추가합니까?js 응용

아시 콘노리・ 5월 30일・ 2분 읽기

#nextjs #react #beginners #javascript

Cypress를 사용하여 완벽한 통합 테스트를 수행하는 이유는 무엇입니까?

  • Cypress 테스트 작성은 간단하며 직관적인 느낌
  • 빠른 설치를 위한 우수한 개발 경험
  • 이러한 테스트는 응용 프로그램의 사용 방식과 유사하며, 그것들의 실현 방식이 아니다. 이것은 전체 응용 프로그램을 재구성하더라도 변경할 필요가 없다는 것을 의미한다.

    • 측백나무


    종속성 설치


    사선:yarn add cypress start-server-and-test --dev
  • npm:npm install cypress start-server-and-test --save-dev
    • start-server-and-test에서는 Cypress를 시작하기 전에 로컬에서 애플리케이션을 실행할 수 있습니다.
    이제 Cypress를 처음 열어야 합니다.
    사선:yarn run cypress open
  • npm:npx cypress open
    • 이렇게 하면 응용 프로그램의 루트 디렉토리에 폴더 세트가 추가됩니다.
  • 측백나무/고정장치→ 아날로그 서버 응답
    • 입니다.
  • 측백나무/통합→ 사용자 인터페이스 테스트
  • cypress/플러그인→ 네가 맞혔어, 이것들은cypress 플러그인이야!
  • 측백나무/받침대→ 이것들은 다시 사용할 수 있는 함수입니다. 우리의 테스트에 사용할 수 있습니다.
    • 이것도 cypress/integration/examples에 일련의 유용한 예시 테스트를 추가할 것이다!

    스크립트 추가


    현재 우리는 cypress를 실행하기 위해 package.json에 스크립트를 추가해야 한다.
    우리가 할 수 있는 일은 두 개의 터미널 창을 여는 것이다...
    이 가운데
  • 은 yarn dev 또는 yarn start을 사용하여 로컬 어플리케이션을 실행합니다.
  • , 다른 단말기에서 로컬 응용 프로그램에서cypress 테스트를 실행합니다.
    • 하지만 이상적이지 않다.반대로, 우리는 명령을 실행해서 우리를 위해 이 두 임무를 완성할 수 있기를 바란다.이것은 발표 파이프 (예를 들어 Jenkins,circle CI,github actions 등) 에서 테스트를 실행하는 것을 더욱 쉽게 할 것이다.
    주의: 포트 yarn dev을 사용하여 포트 3000에서 제 프로그램을 로컬로 실행합니다. (이것은 next.js 프로그램이기 때문입니다.)다른 명령(예: start)이나 다른 포트를 사용한다면 아래 스크립트에서 변경해야 합니다.
    패키지에 다음 스크립트(cy으로 시작하는 스크립트)를 추가합니다.json:
    "scripts": {
    "dev": "next dev",
    ...
    "cy:open-only": "cypress open",
    "cy:run-only": "cypress run",
    "cy:open": "start-server-and-test dev 3000 cy:open-only",
    "cy:run": "start-server-and-test dev 3000 cy:run-only"
  },
    start-server-and-test 명령은 Cypress를 시작하기 전에 로컬에서 응용 프로그램을 실행할 수 있도록 한다는 것을 기억하십시오.
  • cy:open-only에서 cypress GUI
    • 이 열립니다.
  • cy:run-only cypress 테스트
    • 실행
  • cy:open에서는 dev을 실행하여 로컬에서 어플리케이션을 실행한 다음 cy:open-only을 실행하여 cypress GUI를 엽니다.
  • cy:run은 dev을 실행하여 로컬에서 저희 프로그램을 실행하고 cy:run-only을 실행하여 터미널에서cypress테스트를 실행합니다.
    • 프로그램이 실행 중이지 않으면, 두 명령 자체가 작동할 수 없습니다.이것이 바로 우리가 마지막 두 개의 명령을 가지고 있는 이유입니다. 이것은 로컬에서 우리의 프로그램을 실행하고 테스트를 실행하며, 단독 단말기에서 우리의 프로그램을 실행할 필요가 없습니다.

    첫 번째 테스트 추가

  • ./cypress/integration/에 app.spec.js이라는 테스트 파일 추가
    • context('App', () => {
    it('should load our app and show content', () => {
      cy.visit('<http://localhost:3000>')
      cy.contains('Welcome to Next.js!')
    })
  })
    홈 페이지의 일부 텍스트를 참조하려면 반드시 cy.contains을 업데이트하십시오.나는 새로운 방식으로 이 일을 하고 있다.js 응용 프로그램입니다. 그래서 Welcome to Next.js!을 검사하고 있습니다.
    현재, 우리가 실행하는 경우:
    사선:yarn cy:run
  • npm:npm run cy:run
    • 우리는 우리의 테스트가 터미널에서 실행되는 것을 볼 것이다.

    또한 Cypress GUI를 열어 브라우저에서 테스트의 실행 상태를 확인할 수 있습니다. 그런 다음 Cypress를 엽니다.
    사선:yarn cy:open
  • npm:npm run cy:open
    • Cypress 테스트 창을 보고 사용 가능한 모든 테스트를 표시해야 합니다.

    주의: examples이라는 폴더를 접었습니다.app.spec.js을 누르면 브라우저가 팝업되어 응용 프로그램에 내비게이션을 하고 테스트를 실행합니다!

    완성!


    이렇게!우리는 다음 항목에 측백나무를 늘렸다.js 응용 프로그램!🎉 😃
    이제 우리는 모든 사용자의 여정을 위해 끝에서 끝까지 테스트할 수 있습니다!Cypress에 대해 더 알아보기 위해 (Cypress 개발자 체험 디렉터)의'Cypress in a Nutshell'영상을 강력히 추천합니다.이것은 매우 실용적이고 간결한 손목시계다!
    만약 당신이 React에 대한 힌트를 더 많이 들을 흥미가 있다면 다음 단계입니다.js와 자바스크립트, 마음대로 사용하세요!😃
    Matthew on Unsplash!의 멋진 표지 사진
    회귀 분석을 할 때의 요일과 휴일의 위변수
    Habanero Bee에서 Google 스프레드시트를 사용하는 컨텐츠 관리 전략

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage