Fix shared ui tests

.changeset/new-bugs-divide.md

@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": patch
+---
+
+Fix: FOUC

packages/shared/vitest.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   test: {
     environment: "jsdom",
     globals: true,
-    setupFiles: [],
+    setupFiles: ["vitest.setup.ts"],
     coverage: {
       include: ["src/**"],
       exclude: ["src/**/index.ts", "src/**/declaration.d.ts"],

packages/shared/vitest.setup.ts

@@ -0,0 +1,37 @@
+import { vi } from "vitest";
+
+const mediaListeners: (() => void)[] = [];
+// mock matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: query.includes(window.media),
+    media: query,
+    onchange() {
+      this.matches = query.includes(window.media);
+      mediaListeners.forEach(listener => listener());
+    },
+    addEventListener: (_: string, listener: () => void) => mediaListeners.push(listener),
+    removeEventListener: (_: string, listener: () => void) =>
+      mediaListeners.splice(mediaListeners.indexOf(listener), 1),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+declare global {
+  interface Window {
+    media: "dark" | "light";
+  }
+  // skipcq: JS-0102
+  var cookies: Record<string, { value: string }>; // eslint-disable-line no-var -- let is not supported in defining global due to block scope
+}
+Object.defineProperty(window, "media", {
+  writable: true,
+  value: "dark",
+});
+
+globalThis.cookies = {};
+
+vi.mock("next/headers", () => ({
+  cookies: () => ({ get: (cookieName: string) => globalThis.cookies[cookieName] }),
+}));