Window event listener fires but spy does not count it

[nick-roth-sas]

Describe the bug

Trying to migrate a test from jest to vitest. I have a use case where we are listening for message events on window, and I want to verify calls to the listener with a spy.

The provided reproduction shows two scenarios. One where the I call vi.spyOn before the event listener is added and the second where event listener is added first. The listener is called and runs in both cases but the spy only counts if the spy was created before adding to window.

This behavior seems unintuitive at best and like an error in the worst case.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-t28wegld?file=test%2Fbasic.test.ts

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M3
    Memory: 133.05 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.4/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
  Browsers:
    Chrome: 131.0.6778.206
    Safari: 18.1.1
  npmPackages:
    vitest: ^2.1.8 => 2.1.8

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Can you check if this really works on Jest?

I don't think this would work because listenerObj.listener is simply accessed before spied. You would need to delay it like this to make it work:
https://stackblitz.com/edit/vitest-dev-vitest-ril9f8z1?file=src%2Fbasic.ts

export const register = () => {
  // window.addEventListener('message', listenerObj.listener);
  window.addEventListener('message', (e) => listenerObj.listener(e));
};

[nick-roth-sas]

Hi @hi-ogawa Thanks for the quick reply. The actual use case is more complex and I thought I boiled it down to what's in the sample. But I think you might be right and I just needed to step back a bit. I will look at this some more, including a jest version.

[nick-roth-sas]

I put together a jest project that does the same thing. https://stackblitz.com/edit/stackblitz-starters-idnbgrtd?file=src%2Fmain.spec.js This shows both tests passing.

[hi-ogawa]

@nick-roth-sas Thanks for the follow up. Okay, I think the same pattern actually exists on jest if you run only the 2nd test. https://stackblitz.com/edit/stackblitz-starters-emriphcy?file=src%2Fmain.spec.js

Probably, the test looks working when running two together only because first spy didn't get cleaned up. I'd assume that's not what you intended in the test.

The difference between Vitest and Jest is whether calling twice vi.spyOn(listenerObj, 'listener') would reset the spy. This is actually fixed to align with Jest in #6464 and the same test (running two tests together) is going to pass in Vitest 3 https://stackblitz.com/edit/vitest-dev-vitest-wgwrvy9a?file=test%2Fbasic.test.ts.

I don't think the issue is on Vitest, so let me close the issue.