[Bug]: queryMatch.addEventListener is not a function about fluentui

[layershifter]

Please provide an isolated repro on Stackblitz/Github repo 🙏 It would help us to understand the issue.

[layershifter]

In Jest & jsdom typeof window.matchMedia returns:

console.log("window.matchMedia: typeof", typeof window.matchMedia)
// window.matchMedia: typeof undefined

And we have already a check against it:

fluentui/packages/react-components/react-motion/src/hooks/useIsReducedMotion.ts

Line 16 in 02ad941

if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {

It looks that your env mocks window.matchMedia without providing a proper implementation.

[GeoffCoxMSFT]

@layershifter - In this case the partner is trying to unit test a dialog of their own. Our Dialog uses the reduced motion hook. When we test the hook, we mock the media queries. It seems like an unnecessary burden for callers of Dialog writing tests to have to mock all the internals of Dialog and any hooks it uses. The matchMedia returns an object but it doesn't have the add/remove event listener. If the hook checked that the add/remove event listener functions were non-null and functions like it does the matchMedia function, then the hook could return false without the partner needing to mock.

[layershifter]

When we test the hook, we mock the media queries. ... It seems like an unnecessary burden for callers of Dialog writing tests to have to mock all the internals of Dialog and any hooks it uses.

@GeoffCoxMSFT do I correctly understand that window.matchMedia is mocked? If so, why is that needed to test Dialog? As it's not required in the first place...

A minimal example of that unit test would help to understand a proper solution for this issue.

[akisnejuhasz]

Talked offline to show the affected files in the repository. In the end it was me how did not set up a mock correctly for window.matchMedia and addEventListener inside it.

Thank you @layershifter for the help!