[test] Update matchMedia mocks (#43240)

mui · Aug 13, 2024 · ae6fb01 · ae6fb01
1 parent 3308f46
commit ae6fb01
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 4 deletions.
diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
@@ -78,8 +78,8 @@ function createMatchMedia(width) {
     matches: mediaQuery.match(query, {
       width,
     }),
-    addListener: () => {},
-    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
   });
 }
 

diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
@@ -1034,8 +1034,11 @@ function describeConformance(
     });
     window.matchMedia = () =>
       ({
+        // Keep mocking legacy methods because @mui/material v5 still uses them
         addListener: () => {},
+        addEventListener: () => {},
         removeListener: () => {},
+        removeEventListener: () => {},
       }) as unknown as MediaQueryList;
   });
   afterEach(() => {

diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -22,8 +22,11 @@ describe('[Joy] CssVarsProvider', () => {
     });
     window.matchMedia = () =>
       ({
+        // Keep mocking legacy methods because @mui/material v5 still uses them
         addListener: () => {},
+        addEventListener: () => {},
         removeListener: () => {},
+        removeEventListener: () => {},
       }) as unknown as MediaQueryList;
   });
 

diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -215,8 +215,11 @@ describe('extendTheme', () => {
         configurable: true,
       });
       window.matchMedia = () => ({
+        // Keep mocking legacy methods because older code might still use them
         addListener: () => {},
+        addEventListener: () => {},
         removeListener: () => {},
+        removeEventListener: () => {},
       });
     });
 

diff --git a/packages/mui-material/src/styles/ThemeProvider.test.tsx b/packages/mui-material/src/styles/ThemeProvider.test.tsx
@@ -23,8 +23,11 @@ describe('ThemeProvider', () => {
     });
     window.matchMedia = () =>
       ({
+        // Keep mocking legacy methods because @mui/material v5 still uses them
         addListener: () => {},
+        addEventListener: () => {},
         removeListener: () => {},
+        removeEventListener: () => {},
       }) as unknown as MediaQueryList;
   });
 

diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
@@ -22,8 +22,11 @@ describe('[Material UI] ThemeProviderWithVars', () => {
       configurable: true,
     });
     window.matchMedia = () => ({
+      // Keep mocking legacy methods because @mui/material v5 still uses them
       addListener: () => {},
+      addEventListener: () => {},
       removeListener: () => {},
+      removeEventListener: () => {},
     });
   });
 

diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js
@@ -24,8 +24,11 @@ describe('extendTheme', () => {
       configurable: true,
     });
     window.matchMedia = () => ({
+      // Keep mocking legacy methods because @mui/material v5 still uses them
       addListener: () => {},
+      addEventListener: () => {},
       removeListener: () => {},
+      removeEventListener: () => {},
     });
   });
 

diff --git a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
@@ -14,8 +14,8 @@ describe('InitColorSchemeScript', () => {
   let storage = {};
   const createMatchMedia = (matches) => () => ({
     matches,
-    addListener: () => {},
-    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
   });
 
   beforeEach(() => {

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -17,8 +17,11 @@ describe('createCssVarsProvider', () => {
   let storage = {};
   const createMatchMedia = (matches) => () => ({
     matches,
+    // Keep mocking legacy methods because @mui/material v5 still uses them
     addListener: () => {},
+    addEventListener: () => {},
     removeListener: () => {},
+    removeEventListener: () => {},
   });
 
   beforeEach(() => {

diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -18,10 +18,15 @@ describe('useCurrentColorScheme', () => {
 
   const createMatchMedia = (matches) => () => ({
     matches,
+    // Keep mocking legacy methods because @mui/material v5 still uses them
     addListener: (listener) => {
       trigger = listener;
     },
+    addEventListener: (listener) => {
+      trigger = listener;
+    },
     removeListener: () => {},
+    removeEventListener: () => {},
   });
 
   before(() => {

diff --git a/test/integration/mui-system/theme-scoping.test.tsx b/test/integration/mui-system/theme-scoping.test.tsx
@@ -68,8 +68,11 @@ describe('Multiple nested theme providers', () => {
   let storage: Record<string, string> = {};
   const createMatchMedia = (matches: boolean) => () => ({
     matches,
+    // Keep mocking legacy methods because @mui/material v5 still uses them
     addListener: () => {},
+    addEventListener: () => {},
     removeListener: () => {},
+    removeEventListener: () => {},
   });
 
   beforeEach(() => {