Merge pull request #31148 from backstage/rugvip/nomock

ui: fix matchMedia fallback

.changeset/shy-chicken-smash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Removed the need to mock `window.matchMedia` in tests, falling back to default breakpoint values instead.

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -38,6 +38,7 @@ Bitrise
 Blackbox
 bool
 boolean
+breakpoint
 Brex
 broadcasted
 bugfixes

packages/ui/src/hooks/useMediaQuery.ts

@@ -22,7 +22,8 @@ type UseMediaQueryOptions = {
   initializeWithValue?: boolean;
 };
 
-const IS_SERVER = typeof window === 'undefined';
+const IS_SERVER =
+  typeof window === 'undefined' || typeof window.matchMedia === 'undefined';
 
 export function useMediaQuery(
   query: string,
@@ -51,6 +52,9 @@ export function useMediaQuery(
   }
 
   useIsomorphicLayoutEffect(() => {
+    if (IS_SERVER) {
+      return;
+    }
     const matchMedia = window.matchMedia(query);
 
     // Triggered at the first client-side load and if query changes