diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js index 07857d97f75869..d5dc1530998c74 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js +++ b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js @@ -14,34 +14,44 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import { ThemeProvider } from '@mui/material/styles'; const usesUseSyncExternalStore = React.useSyncExternalStore !== undefined; +const matchMediaInstances = new Map(); -function createMatchMedia(width, ref) { +function createMatchMedia(width) { const listeners = []; return (query) => { - const instance = { - matches: mediaQuery.match(query, { - width, - }), - addEventListener: (eventType, listener) => { - listeners.push(listener); - }, - removeEventListener: (eventType, listener) => { - const index = listeners.indexOf(listener); - if (index > -1) { - listeners.splice(index, 1); - } - }, - }; - ref.push({ - instance, - listeners, - }); + let instance = matchMediaInstances.get(query)?.instance; + + if (!instance) { + instance = { + matches: mediaQuery.match(query, { + width, + }), + addEventListener: (eventType, listener) => { + listeners.push(listener); + }, + removeEventListener: (eventType, listener) => { + const index = listeners.indexOf(listener); + if (index > -1) { + listeners.splice(index, 1); + } + }, + }; + matchMediaInstances.set(query, { + instance, + listeners, + }); + } + return instance; }; } describe('useMediaQuery', () => { - const { render, renderToString } = createRenderer(); + const { render, renderToString } = createRenderer({ strict: true }); + + beforeEach(() => { + matchMediaInstances.clear(); + }); describe('without window.matchMedia', () => { let originalMatchmedia; @@ -68,11 +78,8 @@ describe('useMediaQuery', () => { }); describe('with window.matchMedia', () => { - let matchMediaInstances; - beforeEach(() => { - matchMediaInstances = []; - const fakeMatchMedia = createMatchMedia(1200, matchMediaInstances); + const fakeMatchMedia = createMatchMedia(1200); // can't stub nonexistent properties with sinon // jsdom does not implement window.matchMedia if (window.matchMedia === undefined) { @@ -276,8 +283,9 @@ describe('useMediaQuery', () => { expect(getRenderCountRef.current()).to.equal(usesUseSyncExternalStore ? 2 : 4); }); - it('should observe the media query', () => { + it('should observe the media query', async () => { const getRenderCountRef = React.createRef(); + const query = '(min-width:2000px)'; function Test(props) { const matches = useMediaQuery(props.query); @@ -291,14 +299,16 @@ describe('useMediaQuery', () => { query: PropTypes.string.isRequired, }; - render(); + render(); + expect(getRenderCountRef.current()).to.equal(1); expect(screen.getByTestId('matches').textContent).to.equal('false'); - act(() => { - matchMediaInstances[matchMediaInstances.length - 1].instance.matches = true; - matchMediaInstances[matchMediaInstances.length - 1].listeners[0](); + await act(async () => { + matchMediaInstances.get(query).instance.matches = true; + matchMediaInstances.get(query).listeners[0](); }); + expect(screen.getByTestId('matches').textContent).to.equal('true'); expect(getRenderCountRef.current()).to.equal(2); });