测试代码中的window.dispatchEvent不会触发window.addEventListener。
测试代码中的window.dispatchEvent不会触发window.addEventListener。
提问于 2022-04-18 12:48:46
我添加了下面的侦听器，我正在尝试使用Jest编写测试。然而，似乎我要发送的事件没有到达我的代码。
window.addEventListener('message', (event) => {
if (event.data.type === 'abc') {
console.log(event.data.payload);
}
});我尝试了以下两种方法，但这两种方法似乎都不起作用。我无法使用我正在创建的间谍对象来验证调用。请参阅以下代码：
- const listenerSpy =jest.spyOn(窗口，'addEventListener')；const data ={ type：'abc'，有效载荷：‘，}；const messageEvent =新MessageEvent('message'，{data})；window.dispatchEvent(messageEvent)；expect(listenerSpy).toHaveBeenCalledTimes(1)；
- const listenerSpy =jest.spyOn(窗口，'addEventListener')；const data ={ type：'abc'，有效载荷：''，}；window.postMessage(数据，'*')；expect(listenerSpy).toHaveBeenCalledTimes(1)；
对于第一种方法，也尝试使用“新事件(‘message’)”。
通过以上两种方法，我得到了如下错误：
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
102 | window.dispatchEvent(messageEvent);
103 |
> 104 | expect(listenerSpy).toHaveBeenCalledTimes(1);
| ^我还尝试跟踪不同的网站，包括：https://medium.com/@DavideRama/testing-global-event-listener-within-a-react-component-b9d661e59953 https://github.com/enzymejs/enzyme/issues/426
但是没有运气，就像打字稿一样，我不能遵循给出的解决方案。我也试图在堆叠溢出的问题上找到答案，但所提出的解决方案似乎都不适合我。
我是新的反应，并被困在这件事。任何关于这方面的指示都会有帮助。
回答 2
Stack Overflow用户
发布于 2022-05-06 04:07:21
jsdom在setTimeout中触发message事件，请参见这
setTimeout(() => {
fireAnEvent("message", this, MessageEvent, { data: message });
}, 0);有关更多信息，请参见问题
因此，它是异步的，您需要等待setTimeout调度的宏任务在测试用例结束之前完成。
index.ts
export function main() {
window.addEventListener('message', (event) => {
if (event.data.type === 'abc') {
console.log(event.data.payload);
}
});
}index.test.ts
import { main } from './';
function flushMessageQueue(ms = 10) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
describe('71912032', () => {
test('should pass', async () => {
const logSpy = jest.spyOn(console, 'log');
main();
const data = { type: 'abc', payload: 'xyz' };
window.postMessage(data, '*');
await flushMessageQueue();
expect(logSpy).toBeCalledWith('xyz');
});
});测试结果：
PASS stackoverflow/71912032/index.test.ts
71912032
✓ should pass (41 ms)
console.log
xyz
at console.<anonymous> (node_modules/jest-mock/build/index.js:845:25)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.01 s, estimated 13 s另外，看看这个问题-- React :从测试中触发“addEventListener”消息
Stack Overflow用户
发布于 2022-04-19 04:51:44
你看过这个讨论了吗？它似乎也有类似的要求。分派自定义事件并测试它是否被正确触发(React，Jest)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71912032
复制相关文章
相似问题
腾讯云开发者
