Setup Vitest to run with the storybook 9

Author: nchigryay

.gitignore

@@ -99,3 +99,5 @@ instructive-docs
 
 #cursor
 .cursor
+
+**/__screenshots__

packages/config/package.json

@@ -44,7 +44,7 @@
     "@types/node": "^22.15.3",
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.1",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@vitest/coverage-v8": "3.2.1",
     "debug": "^4.4.0",
     "eslint": "^9.25.1",
     "eslint-config-eslint": "^11.0.0",

packages/config/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "types": ["node", "@testing-library/dom", "vitest/globals"],
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

packages/integrations/vitest.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
+    name: 'integrations',
     globals: true,
     environment: 'jsdom',
     setupFiles: [resolve(__dirname, 'test/setup')],

packages/ui/.storybook/preview.ts packages/ui/.storybook/preview.tsxpackages/ui/.storybook/preview.ts renamed to packages/ui/.storybook/preview.tsx

@@ -1,13 +1,6 @@
-// import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite'
-// import { beforeAll } from 'vitest'
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
 
-// import * as projectAnnotations from './preview'
-
-if (process.env.NODE_ENV === 'test') {
-  console.info('Vitest environment loaded')
-  // 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)
-}
+// 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
+setProjectAnnotations([projectAnnotations]);

packages/ui/.storybook/vitest.setup.ts

@@ -52,19 +52,22 @@
     "@solana-foundation/ms-tools-config": "workspace:^",
     "@storybook/csf": "^0.1.13",
     "@storybook/manager-api": "^8.6.14",
+    "@storybook/testing-react": "^2.0.1",
     "@storybook/theming": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.5",
-    "@testing-library/dom": "^10.4.0",
+    "@vitejs/plugin-react": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dom": "link:@types/@testing-library/dom",
+    "jsdom": "^26.1.0",
     "lucide-react": "^0.511.0",
     "next-themes": "^0.4.6",
     "postcss": "^8.4.31",
     "react-hook-form": "^7.56.4",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.5",
+    "testing-react": "link:@types/@storybook/testing-react",
     "vaul": "^1.1.2",
     "zod": "^3.25.30"
   },
@@ -79,9 +82,10 @@
     "@storybook/react": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
     "@storybook/test": "^8.6.14",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@types/node": "^22.15.29",
+    "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@vitest/browser": "3.2.1",
     "@vitest/coverage-v8": "3.2.1",