Cypress를 사용하여 React 응용 프로그램에 대한 테스트를 작성합니다

엔드 투 엔드 (E2E) 테스트는 처음부터 끝까지 응용 프로그램 흐름을 확인합니다. 수동 테스트 대신 CI (Continuous Integration) 가이 프로세스를 자동화합니다. 코드를 작성하고 저장하고 도구가 기존 기능을 중단하지 않도록합니다. Cypress는 특히 React와 같은 최신 JavaScript 라이브러리의 경우이 프로세스를 단순화하는 강력한 E2E 테스트 프레임 워크입니다.

테스트 응용 프로그램 설정

이 튜토리얼은 샘플 TODO 응용 프로그램을 사용합니다. 저장소를 복제 할 수 있습니다.

 git 클론 [이메일 보호] : KinsomicRote/Cypress-React-Tutorial.git

디렉토리로 이동하여 종속성을 설치하십시오.

 CD Cypress-React-Tutorial
원사 설치

Cypress 설치 :

 원사 Cypress -Dev 추가

오픈 사이프러스 :

 node_modules/.bin/cypress Open

쉽게 액세스하려면이 스크립트를 package.json 에 추가하십시오.

 "스크립트": {
  "Cypress": "Cypress Open"
}

이제 yarn cypress 실행하여 사이프러스를 열어줍니다. yarn start .

cypress/integration/init.spec.js 에서 기본 테스트를 작성해 봅시다.

 설명 ( 'cypress', () => {
  it ( '작동 중', () => {
    기대 (true) .to.equal (true);
  });
});

이것은 사이프러스가 작동하고 있음을 확인합니다. 이제 앱 방문을 테스트합시다.

 it ( '앱 방문', () => {
  cy.visit ( 'http : // localhost : 3000');
});

URL을 반복하지 않으려면 cypress.json 에서 기본 URL을 설정하십시오.

 {
  "Baseurl": "http : // localhost : 3000"
}

이제 테스트를 단순화 할 수 있습니다.

 it ( '앱 방문', () => {
  cy.visit ( '/');
});

테스트 양식 컨트롤 및 입력

사용자 상호 작용을 테스트하려면 cypress/integration/form.spec.js 를 만듭니다.

 설명 ( 'form', () => {
  이전 (() => {
    cy.visit ( '/');
  });

  it ( '입력 초점', () => {
    cy.focused ().
  });

  it ( '입력을 허용', () => {
    const input = "Cypress에 대해 배우십시오";
    cy.get ( '. Form-Control')
      . 타입 (입력)
      .Should ( 'hade.value', 입력);
  });

  it ( 'Todos의 표시 목록', () => {
    cy.get ( 'li').
  });

  it ( '새로운 TODO를 추가합니다', () => {
    const input = "Cypress에 대해 배우십시오";
    cy.get ( '. Form-Control')
      . 타입 (입력)
      .type ( '{enter}')
      .get ( 'li')
      .HOUD ( 'hade.length', 3);
  });

  it ( 'todo를 삭제', () => {
    cy.get ( 'li')
      .첫 번째()
      .find ( '. btn danger')
      .딸깍 하는 소리()
      .get ( 'li')
      .Should ( 'hade.length', 1);
  });

  it ( '모든 토 도스를 삭제', () => {
    cy.get ( 'li')
      .첫 번째()
      .find ( '. btn danger')
      .딸깍 하는 소리()
      .get ( 'li')
      .첫 번째()
      .find ( '. btn danger')
      .딸깍 하는 소리()
      .get ( '. no-task')
      .HIBLE ( 'hade.text', '모든 작업이 완료되었습니다. 멋지게 완료되었습니다!');
  });
});

이 테스트는 입력 초점, 입력 수락, 초기 할당 수, 새로운할만한 일을 추가하고, 단일 할 일을 삭제하고, 모든 TODO를 삭제합니다.

네트워크 요청 테스트

네트워크 요청 테스트는 데이터 가져 오기가 올바르게 작동하도록합니다. 예를 들어 JSON 자리 표시 자 API 사용 :

 설명 ( 'request', () => {
  it ( 'API에서 임의의 사용자를 표시', () => {
    cy.request ( 'https://jsonplaceholder.typicode.com/users')
      .Should ((응답) => {
        expling (response.status) .to.eq (200);
        expling (response.body) .to.have.length (10);
        기대 (응답) .to.have.property ( '헤더');
        expling (response) .to.have.property ( 'duration');
      });
  });
});

이는 API 응답 상태, 데이터 길이 및 응답 속성을 확인합니다.

명령 줄에서 실행 중입니다

터미널에서 사이프러스 테스트 실행 :

 NPX Cypress Run

특정 테스트를 실행하려면 :

 NPX Cypress Run -Spec "Cypress/Integration/Form.spec.js"

이것은 테스트 결과에 대한 명령 줄 요약을 제공합니다. 보다 고급 명령 줄 옵션은 Cypress 문서를 참조하십시오.

결론

Cypress는 E2E 테스트를 단순화하여 개발자에게 액세스하고 유익합니다. 이 튜토리얼은 기본 대 중급 테스트 기술을 보여 주므로 기능을 더 탐색하도록 장려합니다. 보다 고급 기능 및 모범 사례는 Cypress 문서에 문의하십시오.

위 내용은 Cypress를 사용하여 React 응용 프로그램에 대한 테스트를 작성합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!