chore(vitest): migrate to vitest browser mode

Author: harry-whorlow

package.json

@@ -63,7 +63,6 @@
     "@vitest/browser-playwright": "^4.0.17",
     "@vitest/coverage-istanbul": "4.1.10",
     "eslint": "^10.8.1",
-    "jsdom": "^27.2.0",
     "knip": "^6.32.0",
     "markdown-link-extractor": "^4.0.3",
     "nx": "^23.1.1",

packages/angular-form/tests/test-setup.ts

@@ -1,5 +1,6 @@
 import '@analogjs/vitest-angular/setup-snapshots'
 import '@testing-library/jest-dom/vitest'
+import '@angular/compiler'
 
 import { NgModule, provideZonelessChangeDetection } from '@angular/core'
 import {

packages/angular-form/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitest/config'
 import angular from '@analogjs/vite-plugin-angular'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json'
 
 const tsconfigPath = 'tsconfig.spec.json'
@@ -10,12 +11,32 @@ export default defineConfig(({ mode }) => ({
     tsconfigPaths({ projects: [tsconfigPath] }),
     angular({ tsconfig: tsconfigPath }),
   ],
+  optimizeDeps: {
+    include: [
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/core/testing',
+      '@angular/common',
+      '@angular/platform-browser',
+      '@angular/platform-browser-dynamic',
+      '@angular/platform-browser-dynamic/testing',
+      '@analogjs/vitest-angular/setup-snapshots',
+      '@testing-library/angular',
+      '@testing-library/jest-dom/vitest',
+    ],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
     globals: true,

packages/form-core/vitest.config.ts

@@ -1,14 +1,24 @@
 import { defineConfig } from 'vitest/config'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
+  optimizeDeps: {
+    include: ['@tanstack/store', '@tanstack/pacer-lite'],
+  },
   test: {
     name: packageJson.name,
     dir: './',
     watch: false,
-    environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     globals: true,
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: {
       enabled: true,
       provider: 'istanbul',

packages/lit-form/vite.config.ts

@@ -1,14 +1,24 @@
 import { defineConfig } from 'vitest/config'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json'
 
 export default defineConfig({
+  optimizeDeps: {
+    include: ['lit', '@tanstack/lit-store', '@tanstack/form-core'],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
     globals: true,
     setupFiles: ['./tests/setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
   },

packages/preact-form/vitest.config.ts

@@ -1,16 +1,34 @@
 import { defineConfig } from 'vitest/config'
 import preact from '@preact/preset-vite'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [preact()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      '@testing-library/preact',
+      '@testing-library/user-event',
+      'preact',
+      'preact/hooks',
+      'preact/compat',
+      '@tanstack/preact-store',
+    ],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     globals: true,
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: {
       enabled: true,
       provider: 'istanbul',

packages/react-form-devtools/vite.config.ts

@@ -1,16 +1,35 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/vite-config'
 import react from '@vitejs/plugin-react'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json'
 
 const config = defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      '@testing-library/react',
+      'react',
+      'react-dom',
+      'react-dom/client',
+      '@tanstack/devtools',
+      '@tanstack/devtools-utils/react',
+    ],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
+    globals: true,
     setupFiles: ['./tests/test-setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     typecheck: { enabled: true },
   },
 })

packages/react-form-nextjs/vite.config.ts

@@ -1,16 +1,33 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/vite-config'
 import react from '@vitejs/plugin-react'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json'
 
 const config = defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      '@testing-library/react',
+      'react',
+      'react-dom',
+      'react-dom/client',
+    ],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
+    globals: true,
     setupFiles: ['./tests/test-setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
   },

packages/react-form-start/vite.config.ts

@@ -1,16 +1,43 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/vite-config'
 import react from '@vitejs/plugin-react'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json'
 
 const config = defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      '@testing-library/react',
+      'react',
+      'react-dom',
+      'react-dom/client',
+      'devalue',
+      'decode-formdata',
+    ],
+    // `@tanstack/react-start` (and its `/server` entry) are always mocked via
+    // `vi.mock` in tests/start.spec.ts. The real packages pull in
+    // `@tanstack/start-server-core`, which uses virtual specifiers
+    // (`#tanstack-router-entry`, `#tanstack-start-entry`) that are only ever
+    // resolved by TanStack Start's own Vite plugin inside a real app. Vite's
+    // dependency-optimization scan does not understand `vi.mock` and will
+    // eagerly try (and fail) to pre-bundle them unless excluded here.
+    exclude: ['@tanstack/react-start', '@tanstack/react-start/server'],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
+    globals: true,
     setupFiles: ['./tests/test-setup.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(
+        process.env.CI ? { launchOptions: { channel: 'chrome' } } : {},
+      ),
+      instances: [{ browser: 'chromium', headless: true }],
+    },
     coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
   },

packages/react-form/tests/test-setup.ts

@@ -5,5 +5,5 @@ import { cleanup, configure } from '@testing-library/react'
 afterEach(() => cleanup())
 
 configure({
-  reactStrictMode: process.env.VITEST_REACT_STRICT_MODE === 'true',
+  reactStrictMode: import.meta.env.VITEST_REACT_STRICT_MODE === 'true',
 })