fix: handle missing window.matchMedia in useTrackColorSchemeChoice (#448)

Author: adamstankiewicz

jest.config.js

@@ -4,4 +4,5 @@ module.exports = createConfig('jest', {
   setupFiles: [
     '<rootDir>/src/setupTest.js',
   ],
+  testTimeout: 20000,
 });

src/react/hooks.js

@@ -33,16 +33,18 @@ export const useTrackColorSchemeChoice = () => {
   useEffect(() => {
     const trackColorSchemeChoice = ({ matches }) => {
       const preferredColorScheme = matches ? 'dark' : 'light';
-
       sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', { preferredColorScheme });
     };
-
-    const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    // send user's initial choice
-    trackColorSchemeChoice(colorSchemeQuery);
-
-    colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
-    return () => colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (colorSchemeQuery) {
+      // send user's initial choice
+      trackColorSchemeChoice(colorSchemeQuery);
+      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
+    }
+    return () => {
+      if (colorSchemeQuery) {
+        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+      }
+    };
   }, []);
 };

src/react/hooks.test.jsx

@@ -5,18 +5,21 @@ import { sendTrackEvent } from '../analytics';
 jest.mock('../analytics');
 
 const mockAddEventListener = jest.fn();
+const mockRemoveEventListener = jest.fn();
 let matchesMock;
 
 Object.defineProperty(window, 'matchMedia', {
   value: jest.fn(() => ({
     addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
     matches: matchesMock,
   })),
 });
 
 describe('useTrackColorSchemeChoice hook', () => {
   afterEach(() => {
     mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
     sendTrackEvent.mockClear();
   });