From 0ffa4c7955aaf8d96bf869ab5564220ce976a883 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 15 Sep 2025 12:09:46 +0200 Subject: [PATCH] ui: fix matchMedia fallback Signed-off-by: Patrik Oldsberg --- .changeset/shy-chicken-smash.md | 5 +++++ .github/vale/config/vocabularies/Backstage/accept.txt | 1 + packages/ui/src/hooks/useMediaQuery.ts | 6 +++++- 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/shy-chicken-smash.md diff --git a/.changeset/shy-chicken-smash.md b/.changeset/shy-chicken-smash.md new file mode 100644 index 0000000000..7524a50580 --- /dev/null +++ b/.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. diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index 516eec516f..b0225be547 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -38,6 +38,7 @@ Bitrise Blackbox bool boolean +breakpoint Brex broadcasted bugfixes diff --git a/packages/ui/src/hooks/useMediaQuery.ts b/packages/ui/src/hooks/useMediaQuery.ts index 9e2cc9ef0b..659ea4a418 100644 --- a/packages/ui/src/hooks/useMediaQuery.ts +++ b/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