title: How can I pass event properties to a customEvent using React Testing Library?
body: <p>I am trying to test a component using RTL that uses a customEvent to trigger a display. Given a component like this:</p>
  <pre><code>const Alerts = () =&gt; {
    const [alerts, setAlerts] = useState([]);
  
    const addAlert = (body, type = 'info', timeout = 7500) =&gt; {
      const key = nextIndex++;
      setAlerts([
        ...alerts,
        { key, body, type },
      ]);
  
      // Set a timer to remove the alert.
      setTimeout(() =&gt; {
        setAlerts(alerts.filter((alert) =&gt; alert.key !== key));
      }, timeout);
    };
  
    document.addEventListener(
      'newalert',
      ({ details:
        {
          body = '',
          type = '',
          timeout = 1000
        } = {}
      }) =&gt; {
        addAlert(body, type, timeout);
    });
  
    return (
      &lt;&gt;
        {alerts.map((alert) =&gt; &lt;Alert {...alert} /&gt;)}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>I am trying to test it like this:</p>
  <pre><code>test('An alert is rendered on a newalert event', () =&gt; {
    render(&lt;Alerts  /&gt;);
    fireEvent(
      document,
      createEvent('newalert', document,
      {
        details: {
          body: 'Hello World!',
          type: 'info',
          timeout: 1000,
        }
      })
    );
  
    expect(screen.getByText('Hello world'));
  });
  </code></pre>
  <p>And it is firing the custom event as expected, however none of the properties (details, body, type, or timeout) is being passed to the event. What am I missing?</p>