如何在React測試庫中測試StopPropagation（）

簡介：在ReactstopPropagation()中進行測試

> 在處理React中的嵌套單擊事件時，正確實現

>至關重要。 而不是直接驗證stopPropagation()的呼叫，而是專注於測試其結果：事件是否傳播？ stopPropagation()>

本文比較了兩種方法：

✅測試

>的效果（事件傳播）。 stopPropagation()>

嘲笑

方法。 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>

為什麼這樣可以：

parent

's
1. 處理程序（<div>）充當偵聽器。 onClick> onOuterClick>如果
>在
2. 內正確函數，則單擊一個元素不應觸發stopPropagation()>FormElementsList>。 onOuterClick
確認成功的事件預防。
3. expect(onOuterClick).toHaveBeenCalledTimes(0)替代：嘲笑

或者，您可以通過模擬事件並跟踪函數調用來直接驗證

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)的執行。
• expect(event.stopPropagation).toHaveBeenCalled()選擇正確的方法stopPropagation() 方法 pros cons 測試事件傳播 測試實際用戶行為 未直接確認call 模擬 直接確認

  >呼叫

  測試實現，而不是行為 推薦

  Method	Pros	Cons
  Testing Event Propagation	Tests actual user behavior	Doesn't directly confirm stopPropagation() call
  Mocking stopPropagation()	Directly confirms stopPropagation() call	Tests implementation, not behavior

  >優先考慮測試真實行為而不是實現細節，以更好地維護性。 事件傳播方法通常是首選。 僅在絕對必要時才使用模擬來驗證特定的調用

  >

  >

以上是如何在React測試庫中測試StopPropagation（）的詳細內容。更多資訊請關注PHP中文網其他相關文章！