feat: use vitest v4 (#4219)

Author: Barsnes

.changeset/brave-seahorses-flow.md

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

.github/workflows/test.yml

@@ -11,6 +11,10 @@ permissions:
   checks: write
   pull-requests: write
 
+concurrency:
+  group: test-${{ github.event.pull_request.number || github.run_id }}
+  cancel-in-progress: true
+
 jobs:
   test:
     name: Build & test

apps/storybook/package.json

@@ -32,8 +32,8 @@
     "@types/ramda": "^0.31.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/browser": "4.0.7",
+    "@vitest/coverage-v8": "4.0.7",
     "axe-playwright": "^2.2.2",
     "playwright": "^1.56.1",
     "prettier": "^3.6.2",
@@ -42,6 +42,6 @@
     "remark-gfm": "^4.0.1",
     "storybook": "^9.1.16",
     "storybook-addon-pseudo-states": "^9.1.16",
-    "vitest": "3.2.4"
+    "vitest": "4.0.7"
   }
 }

apps/storybook/vitest.config.ts

@@ -1,7 +1,8 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-import { defineConfig, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+import { mergeConfig } from 'vitest/config';
 
 import viteConfig from '../../vite.config';
 
@@ -10,41 +11,38 @@ const dirname =
     ? __dirname
     : path.dirname(fileURLToPath(import.meta.url));
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    plugins: [
-      storybookTest({
-        configDir: path.join(dirname, '.storybook'),
-        storybookScript: 'pnpm dev --ci',
-      }),
-    ],
-    test: {
-      exclude: ['./../../packages/**/*.chromatic.tsx', './../../**/*.mdx'],
-      watch: false,
-      browser: {
-        enabled: true,
-        instances: [{ browser: 'chromium' }],
-        provider: 'playwright',
-        headless: true,
-      },
-      setupFiles: ['./.storybook/vitest.setup.ts'],
-      reporters: [
-        'default',
-        [
-          'junit',
-          {
-            outputFile: 'test-report.xml',
-            suiteName: 'Storybook tests',
-            addFileAttribute: true,
-            classnameTemplate: (vars: {
-              filename: string;
-              filepath: string;
-            }): string =>
-              vars.filename.split('../../packages/react/')[1] ?? vars.filename,
-          },
-        ],
-      ],
+export default mergeConfig(viteConfig, {
+  plugins: [
+    storybookTest({
+      configDir: path.join(dirname, '.storybook'),
+      storybookScript: 'pnpm dev --ci',
+    }),
+  ],
+  test: {
+    exclude: ['./../../packages/**/*.chromatic.tsx', './../../**/*.mdx'],
+    watch: false,
+    browser: {
+      enabled: true,
+      instances: [{ browser: 'chromium' }],
+      provider: playwright(),
+      headless: true,
     },
-  }),
-);
+    setupFiles: ['./.storybook/vitest.setup.ts'],
+    reporters: [
+      'default',
+      [
+        'junit',
+        {
+          outputFile: 'test-report.xml',
+          suiteName: 'Storybook tests',
+          addFileAttribute: true,
+          classnameTemplate: (vars: {
+            filename: string;
+            filepath: string;
+          }): string =>
+            vars.filename.split('../../packages/react/')[1] ?? vars.filename,
+        },
+      ],
+    ],
+  },
+});

package.json

@@ -41,14 +41,15 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^22.19.0",
     "@vitejs/plugin-react-swc": "^4.2.0",
-    "@vitest/coverage-v8": "3.2.4",
-    "@vitest/ui": "3.2.4",
+    "@vitest/coverage-v8": "4.0.7",
+    "@vitest/browser-playwright": "4.0.7",
+    "@vitest/ui": "4.0.7",
     "chromatic": "^13.3.3",
     "just-pnpm": "^1.0.2",
     "tsconfck": "^3.1.6",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.1.12",
-    "vitest": "3.2.4"
+    "vitest": "4.0.7"
   }
 }

packages/react/vitest.config.mjs

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path';
+import { playwright } from '@vitest/browser-playwright';
 import { parse } from 'tsconfck';
 /// <reference types="vitest" />
 import { defineProject } from 'vitest/config';
@@ -28,7 +29,7 @@ export default defineProject({
     browser: {
       enabled: true,
       instances: [{ browser: 'chromium' }],
-      provider: 'playwright',
+      provider: playwright(),
       headless: true,
     },
   },