React Jest：从测试中触发“addEventListener”“消息”

【问题标题】：React Jest: trigger 'addEventListener' 'message' from testsReact Jest：从测试中触发“addEventListener”“消息”
【发布时间】：2021-10-15 18:08:28
【问题描述】：

我的 React 项目中有一些代码可以监听 message event。

const onMessage = ({ data }) => {
  console.log('On onMessage has been fired');
}

window.addEventListener('message', onMessage);

有谁知道我如何从我的测试套件中触发此事件？我尝试过诸如events 之类的库以及诸如

之类的许多东西

test('Recieves message', async () => {
  //Some setup..

  //trigger the addEventListener('message')
  window.parent.postMessage('Hello', '*');  //doesn't work
  window.postMessage('Hello', '*'); //doesn't work
  const ee = new events.EventEmitter();
  ee.emit('Hello') //doesn't work

  //Some further tests...
})

似乎没有任何效果。请注意我需要小心这个测试，我不会模拟和覆盖所有addEventListener。我仍然需要核心代码来做我打算做的事情。我只需要从我的测试中触发或发出消息事件

【问题讨论】：

标签： reactjs dom jestjs react-testing-library postmessage

【解决方案1】：

来自文档8. queue-a-global-task 和这个issue。有一个hack方法，你需要从消息队列中刷新微任务。

例如

main.ts:

const onMessage = ({ data }) => {
  console.log('On onMessage has been fired');
};

window.addEventListener('message', onMessage);

main.test.ts:

function flushMessageQueue(ms = 10) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
describe('68756255', () => {
  test('Recieves message', async () => {
    require('./main');
    window.postMessage('Hello', '*');
    await flushMessageQueue();
  });
});

测试结果：

 PASS  examples/68756255/main.test.ts (9.111 s)
  ● Console

    console.log
      On onMessage has been fired

      at onMessage (examples/68756255/main.ts:2:11)


Test Suites: 1 skipped, 1 passed, 1 of 2 total
Tests:       2 skipped, 1 passed, 3 total
Snapshots:   0 total
Time:        10.918 s

【讨论】：