Vitest 3 Reproduction

.storybook/main.ts

@@ -8,11 +8,11 @@ const config: StorybookConfig = {
     '../src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
-    '@storybook/experimental-addon-test',
     '@chromatic-com/storybook',
     '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
     '@storybook/addon-designs',
+    '@storybook/experimental-addon-test',
+    '@storybook/addon-a11y'
   ],
   typescript: {
     reactDocgen: 'react-docgen',

.storybook/preview.tsx

@@ -51,6 +51,7 @@ const preview: Preview = {
       ),
     },
   },
+
   globalTypes: {
     theme: {
       name: 'Theme',
@@ -66,13 +67,17 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: globalDecorators,
-  loaders: [mswLoader, demoModeLoader]
+  loaders: [mswLoader, demoModeLoader],
+  // a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run
+  // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing
+  tags: ['!a11ytest']
 }
 
 declare module '@storybook/csf' {
   interface StoryContext {
-      userEvent: ReturnType<typeof userEvent.setup>;
+    userEvent: ReturnType<typeof userEvent.setup>;
   }
 }
 export default preview

.storybook/vitest.setup.ts

@@ -1,7 +1,10 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { beforeAll } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import * as projectAnnotations from './preview';
 
-const project = setProjectAnnotations([projectAnnotations]);
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
 
-beforeAll(project.beforeAll);
+beforeAll(project.beforeAll);

package.json

@@ -59,19 +59,19 @@
     "@babel/core": "^7.14.6",
     "@chromatic-com/storybook": "^3.2.1",
     "@ladle/react": "^4.1.2",
-    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-a11y": "0.0.0-pr-30181-sha-dba7ad37",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-themes": "^8.4.0",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/experimental-addon-test": "^8.4.0",
-    "@storybook/manager-api": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-essentials": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/addon-themes": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/blocks": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/experimental-addon-test": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/manager-api": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/react": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/react-vite": "0.0.0-pr-30181-sha-dba7ad37",
+    "@storybook/test": "0.0.0-pr-30181-sha-dba7ad37",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.4.0",
+    "@storybook/theming": "0.0.0-pr-30181-sha-dba7ad37",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -87,8 +87,8 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "2.1.2",
-    "@vitest/coverage-v8": "2.1.2",
+    "@vitest/browser": "3.0.0-beta.3",
+    "@vitest/coverage-v8": "3.0.0-beta.3",
     "babel-loader": "8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-open-source": "^1.3.3",
@@ -115,11 +115,11 @@
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.4.0",
-    "vite": "^4.0.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "2.1.2",
+    "storybook": "0.0.0-pr-30181-sha-dba7ad37",
+    "vite": "^6.0.7",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "3.0.0-beta.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "wait-on": "^7.2.0"

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.9'
+const PACKAGE_VERSION = '2.3.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/pages/UserFlows.stories.tsx

@@ -149,6 +149,7 @@ export const ToSuccessPage = {
 
 export const DemoMode: Story = {
   ...ToSuccessPage,
+  tags: ['!test'],
   args: {
     demoMode: true,
   },

vitest.config.ts

@@ -1,5 +1,5 @@
 
-import { mergeConfig, coverageConfigDefaults } from 'vitest/config'
+import { mergeConfig, coverageConfigDefaults, UserConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 
 export default mergeConfig(viteConfig, {
@@ -25,4 +25,4 @@ export default mergeConfig(viteConfig, {
       ],
     },
   },
-})
+} as UserConfig)

vitest.workspace.ts

@@ -11,6 +11,29 @@ export default defineWorkspace([
       // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
       storybookTest({ configDir: '.storybook' }),
     ],
+    optimizeDeps: {
+      include: [
+        '@storybook/addon-a11y/preview', 
+        '@storybook/react', 
+        '@storybook/addon-viewport', 
+        '@storybook/blocks', 
+        'styled-components', 
+        'msw-storybook-addon', 
+        'react-router-dom', 
+        '@reduxjs/toolkit', 
+        'react-redux', 
+        'chromatic/isChromatic', 
+        '@storybook/test',
+        'axios',
+        'react-multi-carousel', 
+        'react-hooks-helper', 
+        'react-loading-skeleton', 
+        'react-lottie-player', 
+        'use-dark-mode', 
+        'react-transition-group', 
+        'react-dom'
+      ]
+    },
     publicDir: 'public',
     test: {
       name: 'storybook',