test(web): React tests run compiled in a real browser

.github/workflows/ci.yml

@@ -268,6 +268,31 @@ jobs:
       - name: Setup Vite+
         uses: ./.github/actions/setup-ci-deps
 
+      # The browser project runs React tests in headless Chromium. Same cache key as
+      # test_server, so both jobs share one downloaded browser.
+      - name: Resolve Playwright version
+        id: playwright_version
+        run: echo "version=$(node -p "require('./apps/web/node_modules/playwright/package.json').version")" >> "$GITHUB_OUTPUT"
+
+      - name: Cache Chromium
+        id: chromium_cache
+        uses: actions/cache@v6
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-shell-${{ runner.os }}-${{ runner.arch }}-${{ steps.playwright_version.outputs.version }}
+
+      - name: Install Chromium for web browser tests
+        if: steps.chromium_cache.outputs.cache-hit != 'true'
+        run: node apps/web/node_modules/playwright/cli.js install --only-shell chromium
+
+      - name: Install missing Chromium system dependencies
+        run: |
+          browser=$(find "$HOME/.cache/ms-playwright" -name chrome-headless-shell -type f -print -quit)
+          test -n "$browser"
+          if ldd "$browser" | grep '=> not found'; then
+            node apps/web/node_modules/playwright/cli.js install-deps chromium
+          fi
+
       - name: Test
         run: vp run --filter @t3tools/web test
 

apps/web/package.json

@@ -9,7 +9,7 @@
     "build": "vp build",
     "preview": "vp preview",
     "typecheck": "tsc-rs --noEmit",
-    "test": "vp test run --passWithNoTests --project unit"
+    "test": "vp test run --passWithNoTests --project unit --project browser"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
@@ -86,9 +86,11 @@
     "@types/react-test-renderer": "19.1.0",
     "@vercel/config": "^0.3.0",
     "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/browser-playwright": "5.0.1",
     "compression": "^1.8.2",
     "jsdom": "^30.0.1",
     "oxc-transform-react": "~0.152.0",
+    "playwright": "1.60.0",
     "react-test-renderer": "19.2.6",
     "tailwindcss": "^4.0.0",
     "unified": "catalog:",

apps/web/src/components/ComposerPromptEditorTiptap.navigation.test.tsx → apps/web/src/components/ComposerPromptEditorTiptap.navigation.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import type { Editor } from "@tiptap/core";
 import { TextSelection } from "@tiptap/pm/state";
 import { act, createRef } from "react";

apps/web/src/components/RightPanelTabs.keyboard.test.tsx → apps/web/src/components/RightPanelTabs.keyboard.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act, type ComponentProps } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

apps/web/src/components/chat/ChatCanvas.test.tsx → apps/web/src/components/chat/ChatCanvas.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act, useLayoutEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";

apps/web/src/components/chat/ThreadDetailsControl.test.tsx → apps/web/src/components/chat/ThreadDetailsControl.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vite-plus/test";

apps/web/src/components/chat/WorkLog.test.tsx → apps/web/src/components/chat/WorkLog.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

apps/web/src/components/chat/threadFindHighlights.test.tsx → apps/web/src/components/chat/threadFindHighlights.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

apps/web/src/components/chat/threadFindPosition.test.ts → apps/web/src/components/chat/threadFindPosition.browser.test.ts

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
 import { readThreadFindPosition } from "./threadFindPosition";
 

apps/web/src/components/chat/timelineMinimapWheel.test.ts → apps/web/src/components/chat/timelineMinimapWheel.browser.test.ts

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { describe, expect, it, vi } from "vite-plus/test";
 
 import { forwardWheelToTimeline } from "./timelineMinimapWheel";

apps/web/src/components/chat/useThreadFindNavigation.test.tsx → apps/web/src/components/chat/useThreadFindNavigation.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import type { LegendListRef } from "@legendapp/list/react";
 import { act, type ComponentProps } from "react";
 import { createRoot, type Root } from "react-dom/client";

apps/web/src/components/onboarding/WelcomeWizard.test.tsx → apps/web/src/components/onboarding/WelcomeWizard.browser.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { EnvironmentId, ProjectId } from "@t3tools/contracts";
@@ -52,7 +51,10 @@ vi.mock("../../state/server", () => ({
     refreshProviders: "refresh",
   },
 }));
-vi.mock("@effect/atom-react", () => ({ useAtomValue: (value: unknown) => value }));
+vi.mock("@effect/atom-react", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useAtomValue: (value: unknown) => value,
+}));
 vi.mock("../../onboarding/useProjectScans", () => ({
   useProjectScans: () => [
     {

apps/web/src/components/ui/switch.test.tsx → apps/web/src/components/ui/switch.browser.test.tsx

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

apps/web/src/composer-list-split.test.ts → apps/web/src/composer-list-split.browser.test.ts

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { Editor } from "@tiptap/core";
 import { TaskList } from "@tiptap/extension-task-list";
 import { TextSelection } from "@tiptap/pm/state";

apps/web/src/hooks/useLocalStorage.hook.test.tsx → apps/web/src/hooks/useLocalStorage.hook.browser.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import * as Schema from "effect/Schema";
 import { act, createElement, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";

apps/web/src/lib/editableFocus.test.ts → apps/web/src/lib/editableFocus.browser.test.ts

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { afterEach, describe, expect, it } from "vite-plus/test";
 
 import { isEditableFocused } from "./editableFocus";

apps/web/src/shortcutModifierState.test.ts → apps/web/src/shortcutModifierState.browser.test.ts

@@ -1,5 +1,3 @@
-// @vitest-environment jsdom
-
 import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

apps/web/vite.config.ts

@@ -3,6 +3,7 @@ import * as NodeZlib from "node:zlib";
 import react from "@vitejs/plugin-react";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import compression from "compression";
+import { playwright } from "vite-plus/test/browser-playwright";
 import { defineProject, type TestProjectInlineConfiguration } from "vite-plus/test/config";
 import "vite-plus/test/config";
 import { defineConfig, type Connect, type Plugin } from "vite-plus";
@@ -70,12 +71,32 @@ const unitTestProject = {
   test: {
     name: "unit",
     include: ["src/**/*.test.{ts,tsx}"],
+    exclude: ["src/**/*.browser.test.{ts,tsx}"],
     hookTimeout: 15_000,
     testTimeout: 15_000,
     setupFiles: ["../../packages/shared/src/testing/longTempDir.ts"],
   },
 } satisfies TestProjectInlineConfiguration;
 
+// Anything that renders React or touches the DOM is named *.browser.test.{ts,tsx} and runs
+// in headless Chromium through the same plugins as the app, so it exercises compiled code.
+const browserTestProject = {
+  extends: true,
+  test: {
+    name: "browser",
+    include: ["src/**/*.browser.test.{ts,tsx}"],
+    hookTimeout: 15_000,
+    testTimeout: 15_000,
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{ browser: "chromium" }],
+      screenshotFailures: false,
+    },
+  },
+} satisfies TestProjectInlineConfiguration;
+
 function resolveDevProxyTarget(
   backendPort: string | undefined,
   wsUrl: string | undefined,
@@ -248,7 +269,7 @@ export default defineConfig(() => {
       sourcemap: buildSourcemap,
     },
     test: {
-      projects: [defineProject(unitTestProject)],
+      projects: [defineProject(unitTestProject), defineProject(browserTestProject)],
     },
   };
 });