fix: guard matchMedia in theme toggle tests

Author: JavaZeroo

src/components/ThemeToggle.jsx

@@ -5,7 +5,9 @@ const themes = ['system', 'light', 'dark'];
 
 function applyTheme(theme) {
   const root = document.documentElement;
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const prefersDark = window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    : false;
   if (theme === 'dark' || (theme === 'system' && prefersDark)) {
     root.classList.add('dark');
   } else {
@@ -22,10 +24,12 @@ export function ThemeToggle({ className = '' }) {
   }, [theme]);
 
   useEffect(() => {
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const media = window.matchMedia
+      ? window.matchMedia('(prefers-color-scheme: dark)')
+      : null;
     const listener = () => theme === 'system' && applyTheme('system');
-    media.addEventListener('change', listener);
-    return () => media.removeEventListener('change', listener);
+    media?.addEventListener('change', listener);
+    return () => media?.removeEventListener('change', listener);
   }, [theme]);
 
   const cycleTheme = () => {

vite.config.js

@@ -15,6 +15,7 @@ export default defineConfig({
   },
   test: {
     environment: 'jsdom',
+    setupFiles: ['./vitest.setup.js'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'lcov'],

vitest.setup.js

@@ -0,0 +1,17 @@
+import { vi } from 'vitest';
+
+if (!window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}