chore(vitest): migrate to vitest browser mode

package.json

@@ -56,14 +56,10 @@
     "@tanstack/eslint-config": "0.4.0",
     "@tanstack/typedoc-config": "0.3.4",
     "@tanstack/vite-config": "0.6.0",
-    "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
     "@types/node": "^25.0.7",
     "@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/package.json

@@ -55,11 +55,11 @@
     "@angular/compiler-cli": "^22.1.1",
     "@angular/core": "^22.1.1",
     "@angular/platform-browser": "^22.1.1",
-    "@angular/platform-browser-dynamic": "^22.1.1",
-    "@testing-library/angular": "^19.4.2",
+    "@angular/router": "^22.1.1",
     "ng-packagr": "^22.1.1",
     "typescript": "^6.0.2",
     "vite-tsconfig-paths": "^6.1.1",
+    "vitest-browser-angular": "^0.5.1",
     "zone.js": "0.16.2"
   },
   "peerDependencies": {

packages/angular-form/tests/app-field.spec.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
-import { render } from '@testing-library/angular'
-import { userEvent } from '@testing-library/user-event'
+import { render } from 'vitest-browser-angular'
+import { userEvent } from 'vitest/browser'
 import { describe, expect, it } from 'vitest'
 import {
   TanStackAppField,
@@ -53,10 +53,9 @@ describe('TanStackAppField', () => {
 
     const screen = await render(AppComponent)
     const lastNameInput = screen.getByLabelText('Last name:')
-    const user = userEvent.setup()
     expect(lastNameInput).toHaveValue('Lovelace')
-    await user.clear(lastNameInput)
-    await user.type(lastNameInput, 'Hopper')
+    await lastNameInput.clear()
+    await userEvent.type(lastNameInput, 'Hopper')
     expect(screen.getByTestId('value')).toHaveTextContent('Hopper')
   })
 })

packages/angular-form/tests/form-group.spec.ts

@@ -1,6 +1,6 @@
 import { Component, signal } from '@angular/core'
-import { render } from '@testing-library/angular'
-import { userEvent } from '@testing-library/user-event'
+import { render } from 'vitest-browser-angular'
+import { userEvent } from 'vitest/browser'
 import { describe, expect, it, vi } from 'vitest'
 import { TanStackField, TanStackFormGroup, injectForm } from '../src/index'
 import type { FormGroupValidators } from '@tanstack/form-core'
@@ -56,12 +56,11 @@ describe('TanStackFormGroup', () => {
     }
 
     const screen = await render(TestComponent)
-    const user = userEvent.setup()
 
     expect(screen.getByText('guest.confirmation')).toBeInTheDocument()
-    await user.click(screen.getByRole('button', { name: 'Change name' }))
-    expect(screen.fixture.componentInstance.validator).toHaveBeenCalled()
-    expect(screen.fixture.componentInstance.listener).toHaveBeenCalled()
+    await screen.getByRole('button', { name: 'Change name' }).click()
+    expect(screen.componentClassInstance.validator).toHaveBeenCalled()
+    expect(screen.componentClassInstance.listener).toHaveBeenCalled()
   })
 
   it('validates and submits one scoped section of a form', async () => {
@@ -121,11 +120,12 @@ describe('TanStackFormGroup', () => {
     }
 
     const screen = await render(TestComponent)
-    const user = userEvent.setup()
-    await user.click(screen.getByRole('button', { name: 'Next' }))
-    expect(await screen.findByRole('alert')).toHaveTextContent('Enter a name')
-    await user.type(screen.getByLabelText('Name'), 'Ada')
-    await user.click(screen.getByRole('button', { name: 'Next' }))
+    await screen.getByRole('button', { name: 'Next' }).click()
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Enter a name')
+    await userEvent.type(screen.getByLabelText('Name'), 'Ada')
+    await screen.getByRole('button', { name: 'Next' }).click()
     await vi.waitFor(() => {
       expect(screen.getByTestId('step')).toHaveTextContent('1')
     })

packages/angular-form/tests/form-type.spec.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
-import { render } from '@testing-library/angular'
+import { render } from 'vitest-browser-angular'
 import { describe, expect, it } from 'vitest'
 import { TanStackField, formOptions, injectForm } from '../src/index'
 import type { AngularFormType } from '../src/index'

packages/angular-form/tests/tanstack-field.spec.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { render } from '@testing-library/angular'
-import { userEvent } from '@testing-library/user-event'
+import { render } from 'vitest-browser-angular'
+import { userEvent } from 'vitest/browser'
 import { describe, expect, it, vi } from 'vitest'
 import {
   TanStackArrayField,
@@ -11,8 +11,6 @@ import {
 import { sleep } from './utils'
 import type { FieldValidatorFn } from '@tanstack/form-core'
 
-const user = userEvent.setup()
-
 describe('TanStackField', () => {
   it('reads and updates a form-level default value', async () => {
     @Component({
@@ -47,10 +45,10 @@ describe('TanStackField', () => {
     const input = screen.getByLabelText('First name')
 
     expect(input).toHaveValue('Ada')
-    await user.clear(input)
-    await user.type(input, 'Grace')
+    await input.clear()
+    await userEvent.type(input, 'Grace')
     expect(screen.getByTestId('value')).toHaveTextContent('Grace')
-    await user.click(screen.getByRole('button', { name: 'Reset' }))
+    await screen.getByRole('button', { name: 'Reset' }).click()
     expect(input).toHaveValue('Katherine')
   })
 
@@ -116,12 +114,12 @@ describe('TanStackField', () => {
     const screen = await render(TestComponent)
     const input = screen.getByLabelText('First name')
 
-    await user.click(input)
-    await user.tab()
-    expect(await screen.findByText(blurMessage)).toBeInTheDocument()
-    await user.click(input)
-    await user.clear(input)
-    await user.type(input, 'A')
+    await input.click()
+    await userEvent.tab()
+    await expect.element(screen.getByText(blurMessage)).toBeInTheDocument()
+    await input.click()
+    await input.clear()
+    await userEvent.type(input, 'A')
     expect(screen.getByText(changeMessage)).toBeInTheDocument()
   })
 
@@ -164,8 +162,10 @@ describe('TanStackField', () => {
     }
 
     const screen = await render(TestComponent)
-    await user.type(screen.getByLabelText('Name'), 'x')
-    expect(await screen.findByRole('alert')).toHaveTextContent('Async issue')
+    await userEvent.type(screen.getByLabelText('Name'), 'x')
+    await expect
+      .element(screen.getByRole('alert'))
+      .toHaveTextContent('Async issue')
   })
 
   it('supports ordered v2 field listeners', async () => {
@@ -195,7 +195,7 @@ describe('TanStackField', () => {
     }
 
     const screen = await render(TestComponent)
-    await user.type(screen.getByLabelText('Name'), 'A')
+    await userEvent.type(screen.getByLabelText('Name'), 'A')
     expect(listener).toHaveBeenCalled()
   })
 })
@@ -225,7 +225,7 @@ describe('TanStackArrayField', () => {
 
     const screen = await render(TestComponent)
     expect(screen.getByTestId('items')).toHaveTextContent('one,two')
-    await user.click(screen.getByRole('button', { name: 'Swap' }))
+    await screen.getByRole('button', { name: 'Swap' }).click()
     expect(screen.getByTestId('items')).toHaveTextContent('two,one')
   })
 })
@@ -252,8 +252,8 @@ describe('injectSelector', () => {
     }
 
     const screen = await render(TestComponent)
-    await user.clear(screen.getByLabelText('Name'))
-    await user.type(screen.getByLabelText('Name'), 'Grace')
+    await screen.getByLabelText('Name').clear()
+    await userEvent.type(screen.getByLabelText('Name'), 'Grace')
     expect(screen.getByTestId('name')).toHaveTextContent('Grace')
   })
 })

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

@@ -1,11 +1,10 @@
 import '@analogjs/vitest-angular/setup-snapshots'
-import '@testing-library/jest-dom/vitest'
 
 import { NgModule, provideZonelessChangeDetection } from '@angular/core'
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing'
 import { getTestBed } from '@angular/core/testing'
 
 @NgModule({
@@ -14,6 +13,6 @@ import { getTestBed } from '@angular/core/testing'
 export class ZonelessTestModule {}
 
 getTestBed().initTestEnvironment(
-  [BrowserDynamicTestingModule, ZonelessTestModule],
-  platformBrowserDynamicTesting(),
+  [BrowserTestingModule, ZonelessTestModule],
+  platformBrowserTesting(),
 )

packages/angular-form/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "target": "es2016",
-    "types": ["vitest/globals", "node"],
+    "types": ["vitest/globals", "vitest/browser", "node"],
     "paths": {
       "@tanstack/form-core": ["../form-core/src"],
       "@tanstack/form-core/internals": ["../form-core/src/internals.ts"]

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,29 @@ export default defineConfig(({ mode }) => ({
     tsconfigPaths({ projects: [tsconfigPath] }),
     angular({ tsconfig: tsconfigPath }),
   ],
+  optimizeDeps: {
+    include: [
+      '@angular/core',
+      '@angular/core/testing',
+      '@angular/common',
+      '@angular/platform-browser',
+      '@angular/platform-browser/testing',
+      '@analogjs/vitest-angular/setup-snapshots',
+      'vitest-browser-angular',
+    ],
+  },
   test: {
     name: packageJson.name,
     dir: './tests',
     watch: false,
-    environment: 'jsdom',
-    setupFiles: ['./tests/test-setup.ts'],
+    setupFiles: ['./tests/test-setup.ts', 'vitest-browser-angular'],
+    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/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "vite.config.ts", "tests"],
+  "include": ["src", "vitest.config.ts", "tests"],
   "exclude": ["eslint.config.js"]
 }

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/tests/form-controller.spec.ts

@@ -1,8 +1,7 @@
 /// <reference lib="dom" />
 import { LitElement, html } from 'lit'
-import '@testing-library/jest-dom'
 import { describe, expect, expectTypeOf, it, vi } from 'vitest'
-import { userEvent } from '@testing-library/user-event'
+import { userEvent } from 'vitest/browser'
 import {
   TanStackFormController,
   defineFieldGroup,
@@ -329,30 +328,28 @@ describe('TanStackFormController', () => {
 
   it('renders v2 validation issues and resets fields', async () => {
     const element = await mount<TestFormElement>('test-lit-form')
-    const user = userEvent.setup()
     const firstName =
       element.shadowRoot!.querySelector<HTMLInputElement>('#firstName')!
     const lastName =
       element.shadowRoot!.querySelector<HTMLInputElement>('#lastName')!
 
-    await user.type(lastName, 'Li')
+    await userEvent.type(lastName, 'Li')
     expect(element.shadowRoot!.querySelector('.last-error')).toHaveTextContent(
       'Use at least 3 characters',
     )
-    await user.type(firstName, ' Lovelace')
-    await user.click(element.shadowRoot!.querySelector('#reset')!)
+    await userEvent.type(firstName, ' Lovelace')
+    await userEvent.click(element.shadowRoot!.querySelector('#reset')!)
     await element.updateComplete
     expect(firstName).toHaveValue('Ada')
   })
 
   it('submits through the form API', async () => {
     const element = await mount<TestFormElement>('test-lit-form')
-    const user = userEvent.setup()
-    await user.type(
+    await userEvent.type(
       element.shadowRoot!.querySelector<HTMLInputElement>('#lastName')!,
       'Lovelace',
     )
-    await user.click(element.shadowRoot!.querySelector('#submit')!)
+    await userEvent.click(element.shadowRoot!.querySelector('#submit')!)
     await vi.waitFor(() => expect(element.submit).toHaveBeenCalledOnce())
   })
 
@@ -397,19 +394,18 @@ describe('TanStackFormController', () => {
 
   it('validates and submits a scoped form group', async () => {
     const element = await mount<FormGroupElement>('test-lit-form-group')
-    const user = userEvent.setup()
 
-    await user.click(element.shadowRoot!.querySelector('#continue')!)
+    await userEvent.click(element.shadowRoot!.querySelector('#continue')!)
     expect(element.shadowRoot!.querySelector('.group-error')).toHaveTextContent(
       'Enter a name',
     )
     expect(element.groupSubmit).not.toHaveBeenCalled()
 
-    await user.type(
+    await userEvent.type(
       element.shadowRoot!.querySelector<HTMLInputElement>('#profileName')!,
       'Ada',
     )
-    await user.click(element.shadowRoot!.querySelector('#continue')!)
+    await userEvent.click(element.shadowRoot!.querySelector('#continue')!)
 
     await vi.waitFor(() => expect(element.groupSubmit).toHaveBeenCalledOnce())
     expect(element.shadowRoot!.querySelector('#step')).toHaveTextContent('1')

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 },
   },