인간에 대한 구성 요소 테스트에 반응합니다

효과적인 React 구성 요소 테스트를 제작하는 것은 직관적이고 간단하며 쉽게 유지 관리 할 수 ​​있어야합니다. 그러나 현재 테스트 라이브러리 생태계는 종종 부족하여 개발자가 지속적으로 강력한 JavaScript 테스트를 작성하는 것을 방해합니다. Testing React 구성 요소와 DOM은 자주 Jest 또는 Mocha와 같은 인기있는 테스트 러너 주변에서 더 높은 수준의 래퍼를 필요로합니다.

도전 : 지루하고 혼란스러운 테스트

현재 테스트 방법은 종종 지루하고 혼란스러워합니다. 테스트 로직을 표현하기위한 jQuery와 같은 체인 스타일은 번거롭고 React의 구성 요소 아키텍처와 일치하지 않습니다. 효소를 사용하는 것과 같은 겉보기에는 읽을 수있는 코드조차도 지나치게 장황 할 수 있습니다.

 excling (screen.find ( ". view"). hasclass ( "Technologies")). to.equal (true);
expling (screen.find ( "h3"). text ()). toequal ( "기술 :");
expling (screen.find ( "ul"). children ()).
기대 (screen.contains ([[
  // ...
])). to.equal (true);
excle (screen.find ( "button"). text ()). toequal ( "back");
expling (screen.find ( "button"). hasclass ( "small")). to.equal (true);

이것은 비교적 간단한 DOM 구조에 해당합니다.

<div classname="view technologies">
  <h3 id="기술">기술 :</h3>
  <ul>
<li>자바 스크립트</li>
<li> 반응</li>
<li> nodejs</li>
<li> 웹 팩</li>
</ul>
  <button classname="small">뒤쪽에</button>
</div>

보다 복잡한 구성 요소를 테스트하면 이러한 문제가 증폭되어 프로세스가 더욱 다루기 어려워집니다. HTML을 생성하기위한 React의 원칙과 테스트 접근법 간의 연결이 끊어지면 비효율적이고 관리하기 어려운 테스트가 발생합니다. 간단한 JavaScript 체인은 장기간 유지 가능성에 충분하지 않습니다.

두 가지 주요 문제가 발생합니다.

• 구성 요소 별 테스트 접근 방식 : 구성 요소 동작에 맞는 테스트를 효과적으로 작성하는 방법.
• 중복성 최소화 : 불필요한 코드를 제거하고 테스트 가독성을 향상시키는 방법.

실용적인 솔루션을 탐색하기 전에 이것을 해결합시다.

반응 구성 요소 테스트를위한 집중된 접근법

기본 반응 구성 요소를 고려하십시오.

 기능 환영 (소품) {
  반품<h1 id="안녕하세요-props-name"> 안녕하세요, {props.name}</h1> ;
}

이 함수는 props 수락하고 JSX를 사용하여 DOM 노드를 반환합니다. 구성 요소는 본질적으로 함수이므로 테스트에는 기능 동작을 확인하는 것이 포함됩니다. 인수가 반환 된 결과에 영향을 미칩니다. RECT 구성 요소의 경우, 이는 props 설정하고 렌더링 된 DOM을 검증하는 것으로 해석됩니다. UI를 수정하는 사용자 상호 작용 (클릭, 마우스 오버 등)도 프로그래밍 방식으로 트리거되어야합니다.

테스트 가독성 향상 : 배열-액세스-어제 패턴

명확하고 읽기 쉬운 테스트가 중요합니다. 이것은 간결한 문구와 일관된 구조에 의해 달성됩니다. AAA (Dearrange-Act-Assert) 패턴이 이상적입니다.

1. 정렬 : 구성 요소 소품을 준비하십시오.
2. ACT : 구성 요소를 렌더링하고 사용자 상호 작용을 트리거하십시오.
3. Assert : 구성 요소의 마크 업을 기반으로 예상 결과를 확인하십시오.

예:

 ( "큰 버튼을 클릭해야합니다", () => {
  // 마련하다
  props.size = "large";

  // 행동
  const 구성 요소 = 마운트 (Send);
  Simulate (구성 요소, {type : "click"});

  // 주장하다
  기대 ( "클래스를 갖는", "클릭");
});

간단한 테스트의 경우 단계를 결합 할 수 있습니다.

 ( "사용자 정의 텍스트로 렌더링해야한다", () => {
  expling ( "텍스트를 가질 때", "텍스트를 가지고", "보내기");
});

현재 테스트 관행 개선

이전 예제는 개념적으로 건전하지만 표준 도구로 쉽게 달성 할 수 없습니다. 이보다 일반적인 접근법을 고려하십시오.

 ( "기술보기를 표시해야합니다", () => {
  const 컨테이너 = document.createElement ( "div");
  document.body.appendChild (컨테이너);

  act (() => {
    REACTDOM.RENDER (<profilecard></profilecard> , 컨테이너);
  });

  const button = container.querySelector ( "버튼");

  act (() => {
    button.dispatchevent (new window.mouseevent ( "click", {bubbles : true}));
  });

  const details = container.querySelector ( ". 세부 사항");

  expling (세부 사항. classlist.contains ( "기술")). tobe (true);
});

이것을보다 추상적 인 버전과 비교하십시오.

 ( "기술보기를 표시해야합니다", () => {
  const 구성 요소 = 마운트 (<profilecard></profilecard> );

  Simulate (구성 요소, {type : "click", target : "button"});

  기대 (구성 요소, "테스트 ID를위한 쿼리", "세부 사항", "클래스를 갖기", "기술");
});

이것은 더 깨끗하고 읽기 쉬운 것입니다. 이 추상화 수준은 예기치 않은 JS 에서 달성 할 수 있습니다.

예기치 않은 테스트

Unexpectedjs는 다양한 테스트 프레임 워크와 호환되는 확장 가능한 어설 션 라이브러리입니다. 플러그인 시스템과 구문은 React 구성 요소 테스트를 단순화합니다. 우리는 예상치 못한 JS의 내부 작업을 깊이 파고 들지 않고 사용법과 예에 중점을 둡니다.

예 : 프로필 카드 구성 요소

ProfileCard 구성 요소를 테스트하겠습니다 (Brevity에 대해서는 코드가 생략되었지만 참조 GitHub 저장소에서 사용 가능).

프로젝트 설정

따라 가려면 Github 저장소를 복제하고 지침을 따라 프로젝트를 설정하고 테스트를 실행하십시오.

구성 요소 테스트

테스트 ( src/components/ProfileCard/ProfileCard.test.js )는 AAA 패턴을 사용합니다.

1. 소품 설정 : beforeEach 기본 소품을 설정합니다.

 이전 (() => {
  소품 = {
    데이터 : {
      이름 : "Justin Case",
      게시물 : 45,
      CreationDate : "01.01.2021",
    },
  };
});

2. 특정 테스트 사례 : 예제에는 "온라인"아이콘, 바이오 텍스트, 기술보기 (데이터 유무), 위치 디스플레이, 콜백 함수 실행 및 기본 소품으로 렌더링에 대한 테스트가 포함됩니다. 각 테스트 케이스는 배열-액세스-어제 패턴을 명확하게 보여줍니다. (자세한 테스트 사례는 간결하게 생략되었지만 Github Repo에서 사용할 수 있습니다).

3. 실행 테스트 : 모든 테스트는 yarn test 로 실행됩니다.

결론

이 예제는 구성 요소 테스트에 반응하는보다 효과적인 접근 방식을 보여줍니다. 구성 요소를 함수로보고 AAA 패턴을 사용하면보다 유지 관리 가능하고 읽기 쉬운 테스트를 만들 수 있습니다. 테스트 라이브러리 선택은 구성 요소 렌더링 및 DOM 비교를 효과적으로 처리하는 능력에 의해 안내되어야합니다. Unexpectedjs는 이와 관련하여 강력한 경쟁자입니다. 완전한 이해와 추가 실험을 위해 제공된 Github 저장소를 탐색하십시오.

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