React Testing Library를 시작합니다

다른 반응 테스트 라이브러리? CSS- 트릭 (실제로 농담과 효소에 관한 기사를 게시했습니다)에 너무 많은 것이 포함되어 있습니다. 충분한 옵션이 없습니까?

그러나 반응 테스트-서식은 다른 테스트 라이브러리 이상입니다. 테스트 라이브러리이지만 기본 원칙을 기반으로하여 다른 테스트 라이브러리와 다릅니다.

테스트가 소프트웨어 사용 방법을 시뮬레이션할수록 자신감이 커질 수 있습니다.

사용자가 앱 사용 방법 을 테스트하려고합니다. 실제로, 구성 요소를 리팩터링하더라도 테스트가 깨지지 않도록 구현됩니다. 나는 우리가 반응 여행의 어느 시점에서 이런 일이 일어났다는 것을 알고 있습니다.

우리는 반응 테스트 -Library를 사용하여 구축 한 간단한 할 일을 위해 테스트를 작성하는 데 시간을 보낼 것입니다. 로컬로 저장소를 복제 할 수 있습니다.

 git 클론 https://github.com/kinsomicrote/todoapp-test.git

이렇게하면 필요한 패키지를 설치하십시오.

 ## 원사
원사 추가-Dev React-Testing-Library Jest-Dom

## npm
NPM 설치-사브 데브 리액 테스트-테스트-직접 농지 -MOD

Jest가 왜 여기에 있는지 알고 싶다면 우리는 그것을 주장에 사용합니다. src 디렉토리에서 __test__ 라는 폴더를 만들고 App.test.js 라는 새 파일을 만듭니다.

스냅 샷을 찍으십시오

스냅 샷 테스트 변경 간의 차이점을 시각적으로 볼 수있는 방법으로 테스트 된 구성 요소에서 수행 된 레코드 테스트.

이 테스트를 처음 실행하면 구성 요소 모양의 첫 번째 스냅 샷을 찍습니다. 따라서 첫 번째 테스트는 확실히 통과됩니다. 왜냐하면 그와 비교할 다른 스냅 샷이 없기 때문입니다. 새로운 요소, 클래스, 구성 요소 또는 텍스트를 추가하여 구성 요소를 새로 변경할 때만 실패합니다. 스냅 샷이 만들어 졌을 때 또는 마지막 업데이트가 마지막으로 업데이트되었을 때 존재하지 않은 컨텐츠를 추가하십시오.

스냅 샷 테스트는 우리가 여기에서 작성한 첫 번째 테스트입니다. App.test.js 파일을 열고 다음과 같이 보이게하겠습니다.

 'React'에서 React React;
"React-Testing-Library"에서 {render, cleanup} 가져 오기;
"Jest-Dom/Extend-Expect"가져 오기;
'./app'에서 앱 가져 오기;

Afterach (정리);

it ( "스냅 샷 일치", () => {
  const {asfragment} = render (<app></app> );
  기대 (asfragment ()). tomatchsnapshot ();
});

이것은 테스트를 작성하고 실행하는 데 필요한 패키지를 가져옵니다. render 테스트하려는 구성 요소를 표시하는 데 사용됩니다. afterEach(cleanup) 라인에서 볼 수 있듯이 각 테스트 실행 후 컨텐츠를 지우기 위해 cleanup 사용합니다.

asFragment 사용하여 렌더 구성 요소의 DocumentFragment 얻습니다. 그런 다음 생성 된 스냅 샷과 일치 할 것으로 기대합니다.

테스트를 실행하여 어떤 일이 발생하는지 확인합시다.

 ## 원사
원사 테스트

## npm
NPM 테스트

아시다시피, 이것이 첫 번째 테스트 인 경우 __tests__ 디렉토리 내부의 __snapshots__ 라는 새 폴더에서 구성 요소 스냅 샷이 생성됩니다. 우리는 실제로 App.test.js.snap 이라는 파일을 가져 오면 다음과 같습니다.

 // Jest Snapshot v1, https://goo.gl/fbaqlp

내보내기 [`스냅 샷 1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          Todo를 추가하십시오
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            작업을 추가하십시오

        </div>
      </div>

    <div>
      <div>
        <h3>
          기울기
        </h3>
        <ul data-test="">
<li>
            <div>
              우유를 사십시오

                엑스

            </div>
          </li>
          <li>
            <div>
              튜토리얼을 작성하십시오

                엑스

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;;

이제 DOM 요소와 이벤트를 테스트합시다

응용 프로그램에는 응용 프로그램이 처음 실행될 때 기본적으로 표시되는 할 일 항목이 포함되어 있습니다. 첫 번째 응용 프로그램이 실행될 때 표시가 표시되도록하고 싶습니다.이를 테스트하려면 순서가없는 목록을 찾아야합니다 (<ul></ul> ) 그리고 길이를 확인하십시오. 우리는 길이가 2와 같을 것으로 예상합니다.

 ( '기본 TODO 항목을 표시합니다', () => {
  const {getByTestId} = render (<app></app> );
  const todolist = getbytestid ( 'todos-ul');
  expect (todolist.children.length) .tobe (2);  
});

이 코드 스 니펫에서 getByTestId 사용하여 App 구성 요소에서 테스트 ID를 추출합니다. 그런 다음 todos-ul 요소를 찾도록 todoList 설정했습니다. 이것은 2를 반환해야합니다.

지금까지 배운 것을 사용하여 사용자가 입력 필드에 값을 입력 할 수 있다고 주장하는 테스트를 작성할 수 있는지 확인하십시오. 다음은해야 할 조치입니다.

• 입력 필드를 얻으십시오
• 입력 필드에 대한 값을 설정합니다
• 변경 이벤트를 트리거합니다
• 입력 필드의 값이 2 단계에서 설정 한 값과 동일하다고 주장합니다.

아래의 대답을 들여다 보지 마십시오! 가능한 한 많은 시간을 보내십시오.

아직도 계속되고 있습니까? 기이! 나는 커피 한 잔을 마시고 곧 돌아올 것이다.

음, 커피. ☕️

오, 당신은 끝났습니다! 당신은 굉장합니다. 답을 비교해 봅시다. 내 것 같아요 :

 it ( '입력 허용', () => {
  const {getBytestid, fireevent} = render (<app></app> );
  항목 = '반응을 배우십시오';
  const todoinputeLement = getByTestId ( 'todo-input');
  TODOINPUTELEMENT.VALUE = 항목;
  fireeevent.change (todoinputelement);
  expling (todoinputeLement.value) .tobe ( 'legr react');
});

getByTestId 사용하여 응용 프로그램에서 테스트 ID를 추출 할 수있었습니다. 그런 다음 변수를 생성하고 문자열 "Learn React"로 설정하고 입력 필드의 값으로 만듭니다. 다음으로 테스트 ID를 사용하여 입력 필드를 얻고 입력 필드의 값을 설정 한 후 변경 이벤트를 트리거합니다. 이 작업을 수행 한 후, 입력 필드의 값은 실제로 "반응을 배우십시오"라고 주장합니다.

이것이 귀하의 답변과 일치합니까? 다른 방법이 있으면 의견을 남겨주세요!

다음으로, 새로운 할 일 항목을 추가 할 수 있는지 테스트합시다. 새로운 프로젝트를 만드는 데 필요한 모든 요소이기 때문에 입력 필드, 새 프로젝트를 추가하려면 버튼을 가져와야합니다.

입력 필드의 값을 설정 한 다음 버튼을 트리거하여 작업을 추가합니다. getByText 사용하여 버튼을 가져 오면이 작업을 수행 할 수 있습니다. 텍스트 "Add Task"로 DOM 요소의 클릭 이벤트를 트리거하여 새로운 할 일 항목을 추가 할 수 있어야합니다.

순서가없는 목록 요소의 자식 요소 (목록 항목)의 수는 3과 같다고 주장합시다. 이는 기본 작업이 여전히 손상되지 않았다고 가정합니다.

 It ( '새로운 TODO 항목 추가', () => {
  const {getBytext, getBytestid, fireevent} = render (<app></app> );
  const todoinputeLement = getByTestId ( 'todo-input');
  const todolist = getbytestid ( 'todos-ul');
  TODOINPUTELENT.VALUE = 'LEARN REACT';
  fireeevent.change (todoinputelement);
  fireeevent.click (getByText ( 'Add Task'));
  expect (todolist.children.length) .tobe (3); 
});

아주 좋아요?

이것은 React에서 테스트하는 한 가지 방법 일뿐입니다

다음 React Application에서 React-Testing-Library를 사용해 볼 수 있습니다. 창고의 문서는 매우 상세하며 대부분의 도구와 마찬가지로 시작하기 가장 좋은 곳입니다. Kent C. Dodds는이를 구축했으며 Frontend Masters (구독 필요)에서 테스트에 대한 전체 코스가 있으며, 이는 반응 테스트-서식의 INS를 포함합니다.

즉, 이것은 REACT의 테스트 리소스 일뿐입니다. 물론 다른 리소스가 있지만, 현재 일부 콘텐츠를보고 시도해 보는 데 관심이 있기를 바랍니다. 물론 프로젝트에 가장 적합한 리소스를 사용해야합니다.

위 내용은 React Testing Library를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!