Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.16.0

Current Behavior

Note: this bug is for the test setup only (Spec Page).

When a Stencil component emits an event using dispatchEvent(), then a parent component can listen for that event using addEventListener(). This works as expected in the browser. But, while running Spec tests, the event handler is not being called.

(The @Listen and @Event decorators are not being used here.)

Expected Behavior

While running Spec tests (with npm run test), then I expect event handlers (added with addEventListener()) to be called when a child component emits an event (emitted with dispatchEvent()).

System Info

System: node 20.9.0
    Platform: darwin (23.4.0)
   CPU Model: Apple M2 Max (12 cpus)
    Compiler: /stencil-event-bug/node_modules/@stencil/core/compiler/stencil.js
       Build: 1713191202
     Stencil: 4.16.0 🚛
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.3

Steps to Reproduce

1. Create a "my-parent" component
2. Add an event listener using addEventListener() in the constructor. Put a console.log in the event handler.
3. Render a component called "my-child" in its JSX template.
4. Create the "my-child" component that emits an event using dispatchEvent() in the componentDidLoad lifecycle method.
5. Create a Spec test file that renders "my-parent".
6. Run the Spec test file. You will not see the console.log being called.

Code Reproduction URL

https://github.com/tomherni/stencil-event-bug

Additional Information

I have everything set up, including the Spec file, in my reproduction repo.