如何在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中文网其他相关文章！