React Testing Library에서 stoppropagation ()을 테스트하는 방법

소개 : reft 에서

테스트 반응에서 중첩 된 클릭 이벤트를 다룰 때 stopPropagation()를 올바르게 구현하는 것은 필수적입니다. 의 호출을 직접 확인하는 대신 결과 테스트에 중점을 둡니다. 이벤트가 전파 되는가? 이 기사는 두 가지 접근법을 비교합니다 ✅

(이벤트 전파)의 효과를 테스트합니다 ✅ ✅ 어떤 방법이 우수하고 언제 각각 사용 해야하는지 결정합니다. 최상의 접근법 : 테스트 이벤트 전파 의 효과. 그런 다음 이벤트가 부모에게 기포되는지 확인합니다.

예 : 전파 방지 stopPropagation() stopPropagation()

왜 이것이 작동 하는가 :

부모 's stopPropagation() handler ()는 청취자 역할을합니다.

가 내에서 올바르게 기능하면 요소를 클릭하는 것이 를 트리거하지 않아도됩니다. stopPropagation() 성공적인 이벤트 예방을 확인합니다

대안 : 조롱

또는 이벤트를 조롱하고 함수 호출을 추적하여

의 호출을 직접 확인할 수 있습니다. 예 : 조롱

stopPropagation() 왜 이것이 작동 하는가 : <div> onClick 함수 호출을 모니터링합니다

클릭을 수동으로 트리거합니다

의 실행을 보장합니다 올바른 메소드 선택 방법 프로 단점 테스트 이벤트 전파 실제 사용자 행동을 테스트합니다 는 호출 를 직접 확인하지 않습니다 조롱 는 호출 를 직접 확인합니다 행동 가 아닌 구현을 테스트합니다 테이블>

<code class="language-javascript">import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FormElementsList } from "@/components/FormElementsList";

it("prevents event propagation on click", async () => {
  const onOuterClick = jest.fn();

  render(
    <div onClick={onOuterClick}>
      <FormElementsList />
    </div>
  );

  const textInputElement = screen.getByText("Text Input");
  await userEvent.click(textInputElement);

  expect(onOuterClick).toHaveBeenCalledTimes(0); // Event propagation prevented
});</code>

추천 더 나은 유지 관리에 대한 구현 세부 사항보다 실제 동작 테스트 우선 순위를 정합니다. 이벤트 전파 방법이 일반적으로 선호됩니다. 특정 호출을

에 확인하는 데 절대적으로 필요한 경우에만 조롱을 사용하십시오.

위 내용은 React Testing Library에서 stoppropagation ()을 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!