set up vitest plugin

.storybook/main.ts

@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
+    '@storybook/experimental-addon-test'
   ],
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// 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([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package.json

@@ -64,6 +64,7 @@
     "@storybook/addon-interactions": "^8.3.0-beta.3",
     "@storybook/addon-themes": "^8.3.0-beta.3",
     "@storybook/blocks": "^8.3.0-beta.3",
+    "@storybook/experimental-addon-test": "^8.3.0-beta.3",
     "@storybook/manager-api": "^8.3.0-beta.3",
     "@storybook/react": "^8.3.0-beta.3",
     "@storybook/react-vite": "^8.3.0-beta.3",

vitest.workspace.ts

@@ -0,0 +1,29 @@
+import { defineWorkspace } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest
+export default defineWorkspace([
+  'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    plugins: [
+      // See options at: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#storybooktest
+      storybookTest({
+        storybookScript: 'yarn storybook --ci'
+      }),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+        provider: 'playwright',
+      },
+      // Make sure to adjust this pattern to match your stories files.
+      include: ['**/*.stories.?(m)[jt]s?(x)'],
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+]);

yarn.lock

@@ -2225,6 +2225,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/experimental-addon-test@npm:^8.3.0-beta.3":
+  version: 8.3.0-beta.3
+  resolution: "@storybook/experimental-addon-test@npm:8.3.0-beta.3"
+  dependencies:
+    "@storybook/csf": "npm:^0.1.11"
+  peerDependencies:
+    "@vitest/browser": ^2.0.0
+    storybook: ^8.3.0-beta.3
+    vitest: ^2.0.0
+  checksum: 10c0/a8e2a670c7b5d16be3c274a7ba56697fbd825ea9052850464d087fbd99457cdc12bbf62ec52c968d9ae83a7ea9770beddd0c909e0477ac691114b1c0d3b97d10
+  languageName: node
+  linkType: hard
+
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -4773,6 +4786,7 @@ __metadata:
     "@storybook/addon-interactions": "npm:^8.3.0-beta.3"
     "@storybook/addon-themes": "npm:^8.3.0-beta.3"
     "@storybook/blocks": "npm:^8.3.0-beta.3"
+    "@storybook/experimental-addon-test": "npm:^8.3.0-beta.3"
     "@storybook/manager-api": "npm:^8.3.0-beta.3"
     "@storybook/react": "npm:^8.3.0-beta.3"
     "@storybook/react-vite": "npm:^8.3.0-beta.3"