usestate () 후크를 사용하는 테스트 구성 요소

usestate 후크를 사용하여 반응 구성 요소를 테스트하려면 Jest 및 React Testing Library를 사용하여 상호 작용을 시뮬레이션하고 UI의 상태 변경을 확인하십시오. 1) 구성 요소를 렌더링하고 초기 상태를 확인하십시오. 2) 클릭 또는 양식 제출과 같은 사용자 상호 작용을 시뮬레이션합니다. 3) 업데이트 된 상태가 UI에 반영되는지 확인하십시오. 구현 세부 사항이 아닌 동작에 중점을두고 Waitfor와의 비동기 업데이트를 처리하십시오.

useState hook를 사용하는 반응 구성 요소를 테스트 할 때는 본질적으로 상태 변화가 구성 요소의 동작 및 렌더링에 어떤 영향을 미치는지보고 있습니다. 구성 요소가 상태 업데이트에 올바르게 응답하도록하는 것입니다.

이러한 동적 구성 요소를 테스트하는 세계로 뛰어 들자.

당신이 예술 작품을 만들고 있다고 상상해보십시오. 브러시의 모든 스트로크가 캔버스를 바꿉니다. 이것이 반응 구성 요소에서 useState 가하는 일입니다. 상태 변경으로 페인트 할 수 있습니다. 이제 이러한 구성 요소를 테스트하는 것은 자신의 아트 워크를 비판하는 것과 같습니다. 각 스트로크 (또는 상태 변화)가 상상했던 걸작의 결과를 보장합니다.

시작하려면 React Testing Library와 함께 Jest와 같은 테스트 라이브러리를 사용하고 싶을 것입니다. 이 도구를 사용하면 사용자 상호 작용을 시뮬레이션하고 구성 요소의 출력을 확인하는 데 도움이됩니다. 다음과 같은 방법은 다음과 같습니다.

 'React'에서 React React;
'@testing-library/react'에서 {render, fireevent} import;
'./counter'에서 카운터 가져 오기;

테스트 ( '증분 카운터', () => {
  const {getByText} = render (<counter />);
  const excrementbutton = getByText ( &#39;increment&#39;);

  // 초기 상태 검사
  기대 (getByText ( &#39;count : 0&#39;)). tobeintheDocument ();

  // 클릭을 시뮬레이션합니다
  fireeevent.click (incrementbutton);

  // 새 상태를 확인하십시오
  excling (getByText ( &#39;count : 1&#39;)). tobeintheDocument ();
});

이 테스트는 '증가'버튼을 클릭하면 상태가 0에서 1으로 올바르게 업데이트되는지 확인합니다. 그러나 더 복잡한 상태 상호 작용을 다루는 경우 어떻게해야합니까? 여러 상태 변수를 사용하는 양식이 있다고 가정 해 봅시다. 다음은 다음을 테스트 할 수있는 방법입니다.

 'React'에서 React React;
'@testing-library/react'에서 {render, fireevent} import;
'./form'에서 가져 오기 양식;

테스트 ( '양식 제출 업데이트 상태', () => {
  const {getByLabelText, getByText} = render (<form />);

  // 양식을 채우십시오
  fireeevent.change (getByLabelText ( &#39;name :&#39;), {target : {value : &#39;john doe&#39;}});
  fireeevent.change (getByLabelText ( &#39;email :&#39;), {target : {value : &#39;john@example.com&#39;});

  // 양식을 제출하십시오
  fireeevent.click (getByText ( &#39;제출&#39;));

  // 업데이트 된 상태를 확인하십시오
  expling (getByText ( &#39;name : john doe&#39;)). tobeintheDocument ();
  expling (getByText ( &#39;email : john@example.com&#39;)). tobeinthedocument ();
});

이제 뉘앙스와 잠재적 인 함정에 대해 이야기합시다. 일반적인 실수 중 하나는 행동보다는 구현 세부 사항을 테스트하는 것입니다. 상태가 내부적으로 관리되는 방식이 아니라 사용자가보고 상호 작용하는 것에 집중하고 싶습니다.

예를 들어, 다음과 같은 테스트를 피하십시오.

 // 나쁜 연습 : 구현 세부 사항 테스트
test ( 'state is updated', () => {
  const {container} = render (<counter />);
  const instance = container.firstchild._reactinternals;
  expling (instance.memoizedstate) .tobe (0);
});

이 테스트는 구성 요소의 내부 상태를 살펴 봅니다.이 상태는 깨지기 쉽고 React의 내부에 따라 변경 될 수 있습니다. 대신 렌더링 된 출력 및 사용자 상호 작용에 중점을 둡니다.

고려해야 할 또 다른 측면은 비동기 상태 업데이트를 테스트하는 것입니다. 구성 요소가 useEffect 사용하여 상태를 비동기로 업데이트하는 경우, 주정부가 업데이트 된 후에 어설 션이 실행되도록 React Testing Library의 waitFor 사용해야합니다.

 '@testing-library/react'에서 {waitfor} 가져 오기;

test ( 'Async State Update', async () => {
  const {getByText} = render (<asynccounter />);

  fireeevent.click (getByText ( &#39;fetch count&#39;));

  대기 중 (() => {
    기대 (getByText ( &#39;count : 10&#39;)). tobeintheDocument ();
  });
});

성능 최적화 및 모범 사례와 관련하여 과잉 테스트는 테스트 스위트가 느리게 이어질 수 있음을 기억하십시오. 구성 요소의 중요한 경로에 집중하십시오. 또한 Realtdom/Test-Utils의 act 사용하여 상태 업데이트를 마무리하고 올바르게 처리되는지 확인하십시오.

 'react-dom/test-utils'에서 {act} 가져 오기;

테스트 ( '카운터 증분', () => {
  컨테이너하자;
  act (() => {
    컨테이너 = render (<counter />).container;
  });

  const button = container.querySelector ( &#39;button&#39;);
  const label = container.querySelector ( &#39;p&#39;);

  act (() => {
    button.dispatchevent (new mouseevent ( &#39;click&#39;, {bubbles : true}));
  });

  expling (lade.textContent) .tobe ( &#39;count : 1&#39;);
});

마무리 할 때 useState 사용하여 구성 요소를 테스트하는 것은 UI에서 구성 요소의 상태 변경이 올바르게 반영되도록하는 것입니다. 예술과 과학입니다. 정확성뿐만 아니라 사용자 경험을위한 것입니다. 테스트는 동작에 중점을두고 올바른 도구를 사용하여 상호 작용을 시뮬레이션하며 비동기 업데이트를 고려하는 것을 잊지 마십시오. 이러한 관행을 통해 React 구성 요소가 강력하고 신뢰할 수 있도록합니다.

위 내용은 usestate () 후크를 사용하는 테스트 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!