Cypress로 VUE 구성 요소를 테스트합니다

브라우저 기반 애플리케이션을위한 강력한 자동 테스트 러너 인 Cypress는 이제 구성 요소 테스트를 지원합니다. 이 기사는 Cypress 구성 요소 테스트를 대규모 VUE 응용 프로그램에 통합하여 모범 사례를 강조하고 일반적인 문제를 해결합니다. 이전에 JEST 및 VUE 테스트 UTILS를 사용한 우리 팀은 브라우저 기반 테스트 환경과 기존 엔드 투 엔드 테스트와 완벽한 통합을 위해 Cypress로 전환했습니다.

참고 : 이 기사는 Cypress 8 기능을 반영합니다. 향후 업데이트에서 잠재적 인 변화를 기대하십시오.

구성 요소 테스트 구조 : 실용적인 예

제목, 신체 및 승인 버튼이있는 "개인 정보 보호 정책"구성 요소를 고려하십시오. 버튼을 클릭하면 "확인"이벤트가 방출됩니다. 사이프러스 구성 요소 테스트는 다음과 같습니다.

 '@cypress/vue'에서 {mount} 가져 오기;
'./privacypolicynotice.vue'에서 privacypolicynotice 가져 오기;

설명 ( 'privacypolicynotice', () => {
  it ( '제목을 렌더링', () => {
    마운트 (privacypolicynotice);
    cy.cintains ( 'h1', 'privacy policy').
  });

  it ( '버튼 클릭의 "확인"이벤트를 방출합니다. (), () => {
    마운트 (privacypolicynotice);
    cy.cintains ( 'button', '/^ok/')
      .딸깍 하는 소리()
      .Vue ()
      . ((래퍼) => {
        expling (wrapper.emitted ( 'succivent')). to.have.length (1);
      });
  });
});

이 테스트는 UI (User Interface) 요소 및 API (Developer Interface) 이벤트, 암시 적으로 구성 요소 구조 및 접근성을 검증합니다. 예를 들어 DIV로 버튼을 바꾸면 즉시 접근성 문제가 강조됩니다.

테스트 전략 : 계층화 된 접근법

우리의 테스트 전략은 다음을 구별합니다.

• 단위 테스트 : 개별 기능 동작을 확인하십시오.
• 구성 요소 테스트 : UI 구성 요소를 분리하고 사용자 및 개발자 상호 작용을 확인합니다.
• 엔드 투 엔드 테스트 : 사용자의 관점에서 전체 응용 프로그램의 기능을 테스트하십시오.
• 통합 테스트 : 여러 응용 부분의 상호 작용을 테스트합니다 (더 넓은 범주).

특히 구성 요소 테스트는 예상 이벤트 (개발자 계약) 및 UI 상태 반사 (사용자 계약) 확인에 중점을 둡니다. 그들은 또한 귀중한 구성 요소 문서 역할을합니다.

Cypress vs. Jest/Vue Test Utils : 비교 분석

JEST 및 VUE 테스트 유틸리티는 일반적으로 구성 요소 테스트에 사용되지만 Cypress는 실제 브라우저 환경 내에서 테스트를 실행하여 이점을 제공합니다. 이는 시각적 피드백, 디버깅 기능 및 사실적인 브라우저 API 상호 작용을 제공합니다. Cypress는 구성 요소 장착 및 프레임 워크 관련 어설 션에 대한 VUE 테스트 UTIL을 활용합니다.

실질적인 구현 및 과제

vuetify를 사용한 우리의 대형 Vue 2 응용 프로그램은 몇 가지 과제를 제시했습니다.

• vuetify 통합 : 사전 구성된 vuetify 인스턴스와 구성 요소를 장착하여 올바른 스타일링과 동작을 보장하기 위해 사용자 정의 사이프러스 명령이 만들어졌습니다. 여기에는 사이프러스 루트 요소 ( __cy_root )에 필요한 클래스와 속성을 추가하는 것이 포함되었습니다.
• 사양 파일 구성 : Glob Pattern ( !(node_modules)**/*.spec.js )는 cypress.json 에서 관련없는 파일을 제외하고 구성 요소와 함께 테스트 파일을 찾는 데 사용되었습니다.
• 명령 파일 충돌 : 엔드 투 엔드 테스트 명령에서 구성 요소 테스트 명령을 분리하면 충돌이 방지됩니다.
• Vue 래퍼 액세스 : Custom Cypress 명령 ( cy.vue() )는 어설 션에 대한 Vue Test Utils 래퍼에 대한 액세스를 단순화합니다.

학습 및 모범 사례

초기에 사소한 딸꾹질 (예 : 간헐적 인 Linter 오류)을 만나는 동안 이점은 문제보다 중요합니다. 다양한 수준의 일관된 테스트 접근법과 분리 된 구성 요소를 시각적으로 개발하고 테스트하는 능력이 중요한 장점입니다. 초기 테스트를 위해 간단하고 덜 의존적 인 구성 요소를 선택하는 것이 좋습니다.

결론

Cypress 구성 요소 테스트는 기존의 엔드 투 엔드 테스트를 보완하는 강력하고 사용자 친화적 인 접근 방식을 제공합니다. 여러 도구 (VUE Test Utils, Cypress, Mocha, Chai 등)에 익숙해야하지만 Cypress의 통합 특성은 전체 테스트 프로세스를 단순화합니다. 우리 팀의 개선 된 테스트 가독성과 테스트 범위 증가는 그 효과를 강조합니다.

위 내용은 Cypress로 VUE 구성 요소를 테스트합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!