fix(web): sidebar test runs in the browser project and jsdom pragmas are rejected (#21937)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/package.json

@@ -43,7 +43,7 @@
     "sync:pierre-icons": "node scripts/sync-pierre-file-icons.mjs",
     "measure-renders": "node scripts/measure-renders.mts",
     "generate": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-uniwind-themes.mts",
-    "test": "vp test run --config ../../vite.config.ts --dir .",
+    "test": "vp test run --project unit --project react",
     "typecheck": "tsc-rs --noEmit"
   },
   "dependencies": {

apps/mobile/src/features/home/home-route-visibility.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { RegistryContext } from "@effect/atom-react";
 import { Atom, AtomRegistry } from "effect/reactivity";
 import { act, useEffect } from "react";

apps/mobile/src/features/settings/SettingsServerControlsRouteScreen.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { DEFAULT_SERVER_SETTINGS, type ServerSettingsPatch } from "@t3tools/contracts";
 import * as Cause from "effect/Cause";
 import { AsyncResult } from "effect/reactivity";

apps/mobile/src/features/settings/components/BranchNamingSettings.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import type { BranchNamingMode } from "@t3tools/contracts";
 import type { ReactNode } from "react";
 import { act } from "react";

apps/mobile/src/features/threads/use-visible-second-clock.test.tsx

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

apps/mobile/src/features/threads/useThreadHeaderOptions.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import type { VcsStatusResult } from "@t3tools/contracts";
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";

apps/mobile/src/native/NativeHeaderToolbar.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import type { NativeStackHeaderItem } from "@react-navigation/native-stack";
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";

apps/mobile/src/state/use-selected-thread-git-actions.test.tsx

@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { act, useEffect, useReducer } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { AsyncResult } from "effect/reactivity";

apps/mobile/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from "vite-plus";
+import "vite-plus/test/config";
+
+const reactTests = [
+  "src/features/home/home-route-visibility.test.tsx",
+  "src/features/settings/SettingsServerControlsRouteScreen.test.tsx",
+  "src/features/settings/components/BranchNamingSettings.test.tsx",
+  "src/features/threads/use-visible-second-clock.test.tsx",
+  "src/features/threads/useThreadHeaderOptions.test.tsx",
+  "src/native/NativeHeaderToolbar.test.tsx",
+  "src/state/use-selected-thread-git-actions.test.tsx",
+];
+
+export default defineConfig({
+  test: {
+    hookTimeout: 60_000,
+    testTimeout: 60_000,
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: "unit",
+          include: ["**/*.test.{ts,tsx,mjs}"],
+          exclude: ["**/node_modules/**", ...reactTests],
+          setupFiles: ["../../packages/shared/src/testing/longTempDir.ts"],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: "react",
+          include: reactTests,
+          // Native components mock React Native and render through react-dom in these tests.
+          environment: "jsdom",
+        },
+      },
+    ],
+  },
+});

…s/web/src/components/ui/sidebar.test.tsx …c/components/ui/sidebar.browser.test.tsxapps/web/src/components/ui/sidebar.test.tsx renamed to apps/web/src/components/ui/sidebar.browser.test.tsx apps/web/src/components/ui/sidebar.test.tsx renamed to apps/web/src/components/ui/sidebar.browser.test.tsx

@@ -1,23 +1,19 @@
-// @vitest-environment jsdom
+import "../../index.css";
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { afterEach, beforeEach, describe, expect, it } from "vite-plus/test";
+
+import { page, userEvent } from "vite-plus/test/browser";
 
 import { Sidebar, SidebarProvider, SidebarTrigger } from "./sidebar";
 import { resolveSidebarState } from "./sidebarState";
 
 let root: Root;
 let container: HTMLDivElement;
 
-beforeEach(() => {
-  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
-  vi.stubGlobal("matchMedia", (query: string) => ({
-    matches: false,
-    media: query,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-  }));
+beforeEach(async () => {
+  await page.viewport(1280, 900);
   container = document.createElement("div");
   document.body.append(container);
   root = createRoot(container);
@@ -26,7 +22,6 @@ beforeEach(() => {
 afterEach(async () => {
   await act(async () => root.unmount());
   container.remove();
-  vi.unstubAllGlobals();
 });
 
 async function renderSidebar(open: boolean) {
@@ -73,11 +68,20 @@ describe("desktop sidebar focus", () => {
     await renderSidebar(false);
 
     expect(document.activeElement).toBe(element('[data-testid="external-trigger"]'));
-    expect(sidebar.hasAttribute("inert")).toBe(true);
+    expect(sidebar.inert).toBe(true);
+    control.focus();
+    expect(document.activeElement).toBe(element('[data-testid="external-trigger"]'));
+    await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+    expect(document.activeElement).not.toBe(element('[data-testid="internal-trigger"]'));
+    expect(document.activeElement).not.toBe(control);
+    await userEvent.keyboard("{Tab}");
+    expect(document.activeElement).toBe(element('[data-testid="external-trigger"]'));
+    await userEvent.keyboard("{Tab}");
+    expect(document.activeElement).toBe(element('[data-testid="content-control"]'));
 
     await renderSidebar(true);
 
-    expect(sidebar.hasAttribute("inert")).toBe(false);
+    expect(sidebar.inert).toBe(false);
     control.focus();
     expect(document.activeElement).toBe(control);
   });