테스트는 효소 및 반응 테스트 라이브러리와 반응 후크를 반응합니다

후크로 강력한 반응 응용 프로그램을 구축하려면 엄격한 테스트가 필요합니다. 이 튜토리얼은 효소 및 반응 테스트 라이브러리를 사용하여 반응 후크를 효과적으로 테스트하여해야 할 적용 예제를 활용하는 방법을 보여줍니다. 버그가없는 코드를 보장하기 위해 주요 테스트 시나리오 및 모범 사례를 다룰 것입니다.

이 안내서는 농담 및 반응 테스트 기본 사항에 대한 친숙 함을 가정합니다. 효소를 처음 사용하는 경우 진행하기 전에 REACT 응용 분야에서 JEST와의 통합을 검토하는 것을 고려하십시오.

테스트 시나리오

할 일 구성 요소는 이러한 시나리오에 대해 테스트됩니다.

1. 구성 요소 렌더링 : 구성 요소가 성공적으로 렌더링되는지 확인하십시오.
2. 초기 할 일도 디스플레이 : 초기해야 할 일 디 항목이 올바르게 표시되어 있는지 확인합니다.
3. 새로운 할 일 -D-DO 추가 : 새로운 할 일 항목 추가 기능을 테스트하십시오.
4. 할 일 삭제 : 할 일 항목을 제거하는 기능을 확인하십시오.

할 일 구성 요소 코드는 다음과 같습니다.

 "React"에서 reft, {usestate, useref};

const todo = () => {
  const [todos, settodos] = usestate ([[[
    {id : 1, 항목 : "버그 수정"},
    {id : 2, 항목 : "쓰레기를 빼앗아"}
  ]);
  const todoref = useref ();
  const removetodo = id => {
    settodos (todos.filter (todo => todo.id! == id));
  };
  const addTodo = data => {
    id = todos.length 1;
    Settodos ([
      ... Todos,
      {
        ID,
        항목 : 데이터
      }
    ]);
  };
  const handlenewtodo = e => {
    e.preventDefault ();
    const item = todoref.current;
    addTodo (item.value);
    item.value = "";
  };
  반품 (
    <div classname="container"> {/ * ClassName에 ClassName을 수정 */}
      <div classname="row"> {/ * ClassName에 ClassName을 수정 */}
        <div classname="col-md-6"> {/ * ClassName에 ClassName을 수정 */}
          <h2 id="Todo를-추가하십시오">Todo를 추가하십시오</h2>
        </div>
      </div>

      <div classname="row"> {/ * ClassName에 ClassName을 수정 */}
        <div classname="col-md-6"> {/ * ClassName에 ClassName을 수정 */}
          <form onsubmit="{handleNewTodo}"> {/ * 추가 ​​된 양식 태그 */}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * 추가 ​​데이터 테스트 */}
            <button type="submit" data-testid="add-button">작업 추가</button> {/ * 추가 ​​데이터 테스트 */}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * ClassName에 ClassName을 수정 */}
        <div classname="col-md-6"> {/ * ClassName에 ClassName을 수정 */}
          <h3 id="기울기">기울기</h3>
          {! todos.length? (
            <div classname="no-task">일이 없습니다!</div>
          ) : (
            <ul data-testid="todos"> {/ * 추가 ​​데이터 테스트 */}
              {todos.map (todo => {
                반품 (
                  <li key="{todo.id}"> {/ * 수정 된 키 값 */}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removetodo (todo.id)}> x</button> {/ * 추가 ​​Data-testid 및 OnClick */}
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

수출 기본 토드;

참고 : classname 속성은 위 코드에서 className 으로 수정되었습니다. 또한 React Testing Library를 사용하여 쉽게 테스트하기 위해 data-testid 속성이 추가되었습니다.

효소로 테스트

1. 설치 : npm install --save-dev enzyme enzyme-adapter-react-16
2. 효소 구성 (setuptests.js) :

 "효소"에서 효소를 수입하고;
"Enzyme-Adapter-React-16"에서 수입 어댑터;
enzyme.configure ({어댑터 : 새 어댑터 ()});

3. 테스트 (todo.test.js) :

 "React"에서 React React;
"효소"에서 {얕은, 마운트} 수입;
"../todo"에서 TODO 가져 오기;

설명 ( "todo", () => {
  it ( "렌더", () => {
    얕은(<todo></todo> );
  });

  it ( "초기 할 일을 표시", () => {
    const 래퍼 = 마운트 (<todo></todo> );
    expling (래퍼 .find ( "li")). ToHilegrength (2);
  });

  it ( "새 항목 추가", () => {
    const 래퍼 = 마운트 (<todo></todo> );
    Wrapper.Find ( "Input"). instance (). value = "실패 테스트 수정";
    Wrapper.Find ( '[type = "제출"]'). 시뮬레이션 ( "제출"); // 제출을 시뮬레이션하고 클릭하지 않습니다
    expling (rapper.find ( "li")). ToHiLength (3);
    expling (wrapper.find ( "li"). last (). text ()). Tocontain ( "실패 테스트 수정"); // 개선 된 주장
  });

  it ( "항목 제거", () => {
    const 래퍼 = 마운트 (<todo></todo> );
    rapper.find ( '[data-testid = "delete-button"]'). first (). simulate ( "click");
    expling (래퍼 .find ( "li")). ToHilegrength (1);
  });
});

React 테스트 라이브러리로 테스트

1. 설치 : npm install --save-dev @testing-library/jest-dom @testing-library/react
2. 테스트 (todo.test.js) :

 "React"에서 React React;
"@testing-library/react"에서 가져 오기 {render, fireevent, screen};
"../todo"에서 TODO 가져 오기;
"@testing-library/jest-dom"가져 오기;

설명 ( "todo", () => {
  it ( "초기 할 일을 표시", () => {
    세우다(<todo></todo> );
    expect (screen.getByTestId ( "todos"). children.length) .tobe (2);
  });

  it ( "새로운 할 일을 추가합니다", () => {
    세우다(<todo></todo> );
    fireeevent.change (screen.getByTestId ( "input"), {target : {value : "new task"}});
    fireeevent.click (screen.getByTestId ( "Add-Button"));
    기대 (screen.getByTestId ( "todos"). children.length) .tobe (3);
  });

  it ( "할 일 삭제", () => {
    세우다(<todo></todo> );
    fireeevent.click (screen.getAllByTestId ( "delete-button") [0];
    기대 (screen.getByTestId ( "todos"). children.length) .tobe (1);
  });
});

프로젝트 구조에 필요에 따라 파일 경로를 조정해야합니다. 이 개선 된 버전은보다 강력하고 유지 관리 가능한 테스트를 제공합니다. data-testid 사용하면 테스트가 구성 요소 구조의 변화에 ​​더 탄력적입니다.

위 내용은 테스트는 효소 및 반응 테스트 라이브러리와 반응 후크를 반응합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!