dispatching of events from rendered components

[southbeach]

I have a problem listening to an event which was dispatched in the react js component rendered through render function of the @testing-library/react.

Component

const User = () => {
  useEffect(() => {
    dispatchEvent(new CustomEvent('mounted', { bubbles: true, detail: {foo: "bar"}}));
  }, [])
}

Unit Test

it("should get event", () => {
    return new Promise(resolve => { // return promise so runner waits on it.
        window.addEventListener("mounted", event => {
            expect(event.detail.foo).equal("bar");
            resolve();
        });

        act(() => {
            render(<UserList />);
        });
    });
});

Issue: Unit Test simply times out, and no events were dispatched. I'm using vitest as the runner.

[bnzone]

Seems to be working

> rtl-issue-1357@0.0.0 test
> vitest run

 RUN  v2.1.1 

 ✓ tests/User.test.jsx (1)
   ✓ User (1)
     ✓ should get event

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  15:12:02
   Duration  518ms (transform 32ms, setup 74ms, collect 20ms, tests 9ms, environment 179ms, prepare 58ms)

[MatanBobi]

Thanks @bnzone.
@southbeach - Here's a working example of the code you've posted: https://stackblitz.com/edit/rtl-template-dt3qsa?file=src%2FApp.test.tsx

I'm resolving this as it doesn't seem to be an issue with RTL, if you still believe it us, please comment here with more details.