模拟自定义事件

【问题标题】：Mock a custom event模拟自定义事件
【发布时间】：2023-03-29 17:33:01
【问题描述】：

一个简单的 React 组件的一部分：

const doIt=()=>{
    window.dispatchEvent(new CustomEvent('info', {detail: [1,2,3]}));
};
return (
    <button onClick={doIt}>Hello</button>
)

上面的自定义事件正在被树中远处的另一个组件监听并调用回调。我想在不涉及侦听器组件的情况下编写一个关于“Hello”按钮的测试。我应该如何模拟这个事件？

【问题讨论】：

【解决方案1】：

我建议使用 jest 来监视 window.dispatchEvent。你可以这样做：

const mockDispatchEvent = jest.spyOn(window, 'dispatchEvent');

然后，您可以像通常对 jest 一样对模拟进行断言：

expect(mockDispatchEvent).toHaveBeenCalledWith(...);

或：

expect(mockDispatchEvent).toMatchSnapshot(...);

显然，这并不能测试事件是否实际发出，但您应该能够相信 window.dispatchEvent 正确地完成了它的工作。

【讨论】：