React单元测试dispatchEvent报参数非Event类型问题求助

测试代码中执行手动派发点击事件的代码时抛出类型错误：

Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.

涉及的核心事件派发代码：

button.dispatchEvent(new MouseEvent("click", { bubbles: true }));

测试用的目标按钮DOM结构：

<button onClick={handleAdd} testid="handleAdd">Add</button>

完整测试代码：

let container;

describe("Testing Buttons", () => {
  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    document.body.removeChild(container);
    container = null;
  });

  it("should increment", () => {
    act(() => {
      ReactDOM.createRoot(container).render(<App />);
    });

    let h1 = screen.getByRole("heading", { level: 1 });
    let count = Number(h1.innerHTML);
    expect(count).toBe(0);
    const button = screen.getByText("Add");
    expect(button).toBeInTheDocument();
    act(() => {
      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    expect(count).toBe(1);
  });
});

已尝试过通用的同类问题解决方案，均未生效。

这个报错的核心触发原因有两个：

• 测试环境全局MouseEvent构造函数被模拟逻辑覆盖，生成的对象不是JSDOM/浏览器原生识别的合法Event实例，dispatchEvent做参数类型校验时直接抛出错误。这类覆盖通常来自错误的Jest配置、低版本JSDOM、或者全局setup脚本里手动添加的事件polyfill。
• 代码本身存在逻辑缺陷：点击事件触发前就把计数值缓存到了count变量中，原始类型值不会随DOM更新同步变化，哪怕事件派发成功，最后的断言也会失败。

按优先级操作即可解决问题：

• 优先使用Testing Library内置的事件触发方法代替手动构造原生事件，这也是React测试的推荐写法，从根源规避事件构造的类型兼容问题：

  // 引入fireEvent方法
  import { fireEvent } from '@testing-library/react';
  
  // 替换原有手动dispatchEvent的逻辑
  act(() => {
    fireEvent.click(button, { bubbles: true });
  });
  

• 如果必须手动构造原生事件，显式从window对象上引用未被覆盖的原生构造函数，同时补全事件默认配置：

  act(() => {
    const clickEvt = new window.MouseEvent('click', {
      bubbles: true,
      cancelable: true
    });
    button.dispatchEvent(clickEvt);
  });
  

• 修正断言逻辑，事件执行完成后再读取DOM上的最新计数值，不要使用提前缓存的变量：

  // 移除之前提前赋值的count变量断言逻辑，事件触发后重新获取值
  act(() => {
    fireEvent.click(button, { bubbles: true });
  });
  const latestCount = Number(h1.textContent);
  expect(latestCount).toBe(1);
  

• 检查测试环境配置：确认Jest的testEnvironment配置为jsdom，JSDOM版本不低于16.0，删除测试配置中针对MouseEvent、EventTarget的全局mock逻辑。

内容的提问来源于stack exchange，提问作者user8758206