chore: use vitest browser instead of jsdom (#4121)

Author: Barsnes

.changeset/quiet-eagles-attack.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/test.yml

@@ -22,7 +22,8 @@ jobs:
         run: pnpm build
       - name: Types
         run: pnpm types:react
-
+      - name: Install playwright and run Storybook tests
+        run: pnpm test:storybook
       - name: Test
         run: pnpm test
       - name: 'Report Coverage'
@@ -43,8 +44,6 @@ jobs:
       - name: Test CLI (create tokens, then build the theme)
         run: pnpm test:cli
 
-      - name: Install playwright and run Storybook tests
-        run: pnpm test:storybook
       - name: Replace relative paths in test report
         uses: jacobtomlinson/gha-find-replace@f1069b438f125e5395d84d1c6fd3b559a7880cb5 # v3.0.5
         if: success() || failure()

.gitignore

@@ -42,6 +42,7 @@ next-env.d.ts
 
 # jest/vitest test reports
 test-report.xml
+__screenshots__
 
 packages/cli/temp
 

internal/react-18-tests/vitest.config.mjs

@@ -28,7 +28,7 @@ export default defineProject({
     ...baseConfig.test,
     env: {
       ...baseConfig.test.env,
-      REACT_VERSION: '18',
+      VITE_REACT_VERSION: '18',
     },
     root: reactRoot,
   },

packages/react/package.json

@@ -66,7 +66,6 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.15",
     "@types/react-dom": "^19.1.9",
-    "jsdom": "^26.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "^6.0.1",

packages/react/src/components/Combobox/Combobox.test.tsx

@@ -372,6 +372,6 @@ describe('Combobox', () => {
     });
     const combobox = screen.getByRole('combobox');
 
-    expect(combobox).toHaveAccessibleName('CSS (Cascading Style Sheets)');
+    expect(combobox).toHaveAccessibleName('CSS(Cascading Style Sheets)');
   });
 });

packages/react/vitest.config.mjs

@@ -16,15 +16,20 @@ export default defineProject({
   },
   test: {
     env: {
-      REACT_VERSION: '19',
+      VITE_REACT_VERSION: '19',
     },
     typecheck: {
       tsconfig: resolve(import.meta.dirname, 'tsconfig.tests.json'),
     },
     globals: true,
-    environment: 'jsdom',
     setupFiles: ['../../test/vitest.setup.ts', './vitest.setup.ts'].map(
       (path) => resolve(import.meta.dirname, path),
     ),
+    browser: {
+      enabled: true,
+      instances: [{ browser: 'chromium' }],
+      provider: 'playwright',
+      headless: true,
+    },
   },
 });

packages/react/vitest.setup.ts

@@ -2,7 +2,18 @@ import { configure } from '@testing-library/react';
 import { version as reactVersion } from 'react';
 import { version as reactDomVersion } from 'react-dom';
 
-const expectedVersion = process.env.REACT_VERSION;
+interface ImportMetaEnv {
+  VITE_REACT_VERSION?: string;
+}
+
+declare global {
+  interface ImportMeta {
+    env: ImportMetaEnv;
+  }
+}
+
+const expectedVersion = import.meta.env.VITE_REACT_VERSION;
+
 if (expectedVersion) {
   if (!reactVersion.startsWith(expectedVersion)) {
     throw new Error(
@@ -14,6 +25,8 @@ if (expectedVersion) {
       `Expected react-dom v${expectedVersion}, but found v${reactDomVersion}`,
     );
   }
+} else {
+  throw new Error('VITE_REACT_VERSION is not defined');
 }
 
 configure({ reactStrictMode: true });