reactjs - react Jest : trigger 'addEventListener' 'message' from tests

Question

我的 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。我仍然需要核心代码来完成我打算做的事情。我只需要从我的测试中触发或发出消息事件

Answer 1

如果你想创建一个 window.postMessage 事件，你可以利用 fireEvent react-testing-library api。

您的测试代码将如下所示:

import { fireEvent } from '@testing-library/react';


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

  // trigger the addEventListener('message')
    fireEvent(
      window,
      new MessageEvent("message", { data: { foo: "bar" }, origin: "whatever.com" })
    )

  //Some further tests...
})