React TestingライブラリでStopPropagation（）をテストする方法

はじめに：REACTstopPropagation()でのテスト

反応のネストされたクリックイベントを扱う場合、stopPropagation()を正しく実装することが不可欠です。 stopPropagation()の呼び出しを直接検証する代わりに、その結​​果のテストに焦点を当てます。イベントは伝播するかどうか？

この記事では、2つのアプローチを比較しています

✅

（イベントの伝播）の効果をテストします。

stopPropagation()s

メソッドをock笑します。

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>

親 's

ハンドラー（

）はリスナーとして機能します。
1. <div>がonClick内で正しく機能する場合、要素をクリックするとonOuterClick。
2. イベント予防が成功したことを確認します。stopPropagation() FormElementsList onOuterClick代替：mocking
3. expect(onOuterClick).toHaveBeenCalledTimes(0)または、イベントをock笑し、関数呼び出しを追跡することにより、
の呼び出しを直接確認できます。

例：mocking stopPropagation()

stopPropagation()

なぜこれが機能するのか： stopPropagation()

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

it("calls stopPropagation() on click", async () => {
  render(<FormElementsList />);

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

  const event = new MouseEvent("click", { bubbles: true });
  jest.spyOn(event, "stopPropagation");

  textInputElement.dispatchEvent(event);

  expect(event.stopPropagation).toHaveBeenCalled();
});</code>

関数呼び出しを監視します。

クリックを手動でトリガーします。

• jest.spyOn(event, "stopPropagation")の実行を保証します
• 適切な方法の選択dispatchEvent(event) 方法 pro cons イベント伝播のテスト 実際のユーザーの動作をテスト は を直接確認しません mocking を直接確認します 動作ではなく実装をテストします
• 推奨expect(event.stopPropagation).toHaveBeenCalled() stopPropagation()維持可能性を向上させるために、実装の詳細に対する実際の動作のテストを優先順位付けします。 イベント伝播方法が一般的に推奨されます。 特定の呼び出しを確認するために絶対に必要な場合にのみモッキングを使用します。

以上がReact TestingライブラリでStopPropagation（）をテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。