Merged in chore/upgrade-vitest4 (pull request #3253)

chore: upgrade to vitest@4

* chore: upgrade to vitest@4


Approved-by: Anton Gunnarsson

packages/design-system/package.json

@@ -262,7 +262,8 @@
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser": "^3.2.4",
+    "@vitest/browser": "^4.0.0",
+    "@vitest/browser-playwright": "^4.0.0",
     "babel-plugin-formatjs": "^10.5.10",
     "class-variance-authority": "^0.7.1",
     "colord": "^2.9.3",
@@ -291,7 +292,7 @@
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.0",
     "vitest-browser-react": "^1.0.1"
   }
 }

packages/design-system/vitest.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
@@ -13,8 +14,12 @@ import viteConfig from './vite.config'
 const isCI = process.env.CI === 'true'
 
 const browserInstances = isCI
-  ? [{ browser: 'chromium' }]
-  : [{ browser: 'chromium' }, { browser: 'firefox' }, { browser: 'webkit' }]
+  ? [{ browser: 'chromium' as const }]
+  : [
+      { browser: 'chromium' as const },
+      { browser: 'firefox' as const },
+      { browser: 'webkit' as const },
+    ]
 
 export default mergeConfig(
   viteConfig,
@@ -43,7 +48,7 @@ export default mergeConfig(
             browser: {
               enabled: true,
               // Make sure to install Playwright
-              provider: 'playwright',
+              provider: playwright(),
               headless: true,
               instances: browserInstances,
             },