chore(vitest): migrate to vitest browser mode

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,36 @@
 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',
+    ],
+    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',
 })

packages/react-form/vitest.config.ts

@@ -1,16 +1,33 @@
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      '@testing-library/react',
+      'react',
+      'react-dom',
+      'react-dom/client',
+      '@tanstack/react-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/solid-form-devtools/vitest.config.ts

@@ -1,15 +1,25 @@
 import { defineConfig } from 'vitest/config'
 import solid from 'vite-plugin-solid'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [solid()],
+  optimizeDeps: {
+    include: ['@testing-library/jest-dom/vitest', 'solid-js', 'solid-js/web'],
+  },
   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 }],
+    },
   },
 })

packages/solid-form/vitest.config.ts

@@ -1,16 +1,31 @@
 import { defineConfig } from 'vitest/config'
 import solid from 'vite-plugin-solid'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [solid()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      'solid-js',
+      'solid-js/web',
+      '@tanstack/solid-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/svelte-form/vite.config.ts

@@ -1,22 +1,36 @@
 import { defineConfig } from 'vitest/config'
+import { defaultClientConditions } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { svelteTesting } from '@testing-library/svelte/vite'
+import { playwright } from '@vitest/browser-playwright'
 import packageJson from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [svelte(), svelteTesting()],
+  optimizeDeps: {
+    include: [
+      '@testing-library/jest-dom/vitest',
+      'svelte',
+      '@tanstack/svelte-store',
+      '@tanstack/form-core',
+    ],
+  },
   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 },
   },
-  resolve: process.env.VITEST
-    ? {
-        conditions: ['browser'],
-      }
-    : undefined,
+  resolve: {
+    conditions: ['browser', ...defaultClientConditions],
+  },
 })