fix tests dep optimization issues

.github/workflows/test.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Install Playwright Browser
         run: pnpm exec playwright install --with-deps chromium
       - name: Vitest
-        run: "pnpm run test:storybook"
+        run: "pnpm run test:coverage"
       - name: Upload to codecov
         uses: codecov/codecov-action@75cd11691c0faa626561e295848008c8a7dddffe # v5
         env:

.storybook/main.ts

@@ -11,5 +11,26 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: ["@storybook/addon-docs", "@storybook/addon-vitest"],
   framework: "@storybook/react-vite",
+  // THIS IS IMPORTANT
+  // vitest runs without Vite's normal dependency optimization, so we need to manually include the polyfills for the stories to work.
+  // otherwise we will get: new dependencies optimized: ...
+  // and
+  // ```
+  // [vitest] Vite unexpectedly reloaded a test. This may cause tests to fail, lead to flaky behaviour or duplicated test runs.
+  // For a stable experience, please add mentioned dependencies to your config's `optimizeDeps.include` field manually.
+  // ```
+  // which breaks the storybook ci on the first and only run.
+  viteFinal(config) {
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      include: [
+        ...(config.optimizeDeps?.include ?? []),
+        "vite-plugin-node-polyfills/shims/buffer",
+        "vite-plugin-node-polyfills/shims/global",
+        "vite-plugin-node-polyfills/shims/process",
+      ],
+    };
+    return config;
+  },
 };
 export default config;