chore: fix tests

nodejs · Dec 28, 2024 · 796deff · 796deff
1 parent 142a02a
commit 796deff
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 35 deletions.
diff --git a/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs b/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs
@@ -3,75 +3,56 @@ import { renderHook } from '@testing-library/react';
 import useMediaQuery from '@/hooks/react-client/useMediaQuery';
 
 describe('useMediaQuery', () => {
-  it('should check for matchMedia support', () => {
+  it('should return undefined initially', () => {
     const { result } = renderHook(() => useMediaQuery('media-query-mock'));
-
-    expect(result.current).toBe(undefined);
+    expect(result.current).toBe(false);
   });
 
   it('should return true for matched query', () => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: () => ({
+      value: query => ({
         matches: true,
+        media: query,
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
       }),
     });
 
     const { result } = renderHook(() => useMediaQuery('media-query-mock'));
-
     expect(result.current).toBe(true);
   });
 
   it('should return false for not-matched query', () => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: () => ({
+      value: query => ({
         matches: false,
+        media: query,
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
       }),
     });
 
     const { result } = renderHook(() => useMediaQuery('media-query-mock'));
-
     expect(result.current).toBe(false);
   });
 
   it('should subscribe for media changes', () => {
     const listenerMock = jest.fn().mockImplementation((_, handler) => {
-      handler();
+      handler({ matches: false });
     });
 
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
-      value: () => ({
+      value: query => ({
         matches: false,
+        media: query,
         addEventListener: listenerMock,
         removeEventListener: jest.fn(),
       }),
     });
 
-    renderHook(() => useMediaQuery('media-query-mock'));
-
-    expect(listenerMock).toHaveBeenCalledTimes(1);
-  });
-
-  it("should support MediaQueryList's old event listeners", () => {
-    const listenerMock = jest.fn().mockImplementation(handler => {
-      handler();
-    });
-
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: () => ({
-        matches: false,
-        addListener: listenerMock,
-        removeListener: jest.fn(),
-      }),
-    });
-
     renderHook(() => useMediaQuery('media-query-mock'));
     expect(listenerMock).toHaveBeenCalledTimes(1);
   });

diff --git a/apps/site/hooks/react-client/useMediaQuery.ts b/apps/site/hooks/react-client/useMediaQuery.ts
@@ -3,19 +3,23 @@
 import { useState, useEffect } from 'react';
 
 const useMediaQuery = (query: string) => {
-  const [matches, setMatches] = useState<boolean>();
+  const [matches, setMatches] = useState(false);
 
   useEffect(() => {
-    const mq = window.matchMedia(query);
+    const { matches, addEventListener, removeEventListener } =
+      window.matchMedia?.(query) ?? {
+        matches: false,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      };
 
-    setMatches(mq.matches);
+    setMatches(matches);
 
-    const handler = (event: MediaQueryListEvent): void =>
-      setMatches(event.matches);
+    const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
 
-    mq.addEventListener('change', handler);
+    addEventListener('change', handler);
 
-    return () => mq.removeEventListener('change', handler);
+    return () => removeEventListener('change', handler);
   }, [query]);
 
   return matches;