fix(storybook): prevent link navigation in plays

Author: georg-schwarz

.agents/skills/storybook/SKILL.md

@@ -41,6 +41,7 @@ If the user asks to “review the component library in terms of Storybook best p
 - Prefer minimal decorators; if needed, document why they exist.
 - Interaction tests should include at least one assertion so failures are meaningful; use them for behaviors, not purely visual states.
 - Add play functions when user interactions change the UI, trigger callbacks, or guard accessibility flows; skip for static-only components.
+- For links in play functions, prevent default navigation before clicking to avoid browser disconnects during Vitest runs.
 
 ## Repo-specific conventions
 

.github/workflows/ci.yml

@@ -23,14 +23,17 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Install Playwright browsers
+        run: bun x playwright install --with-deps chromium
+
       - name: Lint
         run: bun run lint
 
       - name: Typecheck
         run: bun run typecheck
 
       - name: Storybook tests
-        run: bun run storybook:test
+        run: npx vitest --project=storybook
 
       - name: Build
         run: bun run build

.storybook/vitest.setup.ts

@@ -0,0 +1,4 @@
+import { setProjectAnnotations } from "@storybook/react";
+import * as previewAnnotations from "./preview";
+
+setProjectAnnotations([previewAnnotations]);

bun.lock

@@ -13,7 +13,7 @@
     "typecheck": "astro check",
     "format": "prettier --write \"src/**/*.{ts,tsx,astro,css,md,mdx}\"",
     "storybook": "storybook dev -p 6006",
-    "storybook:test": "bun x @storybook/cli@10.2.15 test",
+    "storybook:test": "vitest --project=storybook",
     "storybook:build": "storybook build"
   },
   "dependencies": {
@@ -32,15 +32,19 @@
     "@storybook/addon-a11y": "^10.2.15",
     "@storybook/addon-docs": "^10.2.15",
     "@storybook/addon-vitest": "^10.2.15",
+    "@storybook/builder-vite": "10.2.15",
     "@storybook/react-vite": "10.2.15",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.10.5",
     "@typescript-eslint/parser": "^8.56.0",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
     "autoprefixer": "^10.4.27",
     "eslint": "^9.17.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-boundaries": "^5.4.0",
+    "playwright": "^1.58.2",
     "postcss": "^8.5.8",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",

package.json

@@ -42,7 +42,9 @@ export const Default: Story = {};
 export const PrimaryActionClick: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("link", { name: "Learn More" }));
+    const link = canvas.getByRole("link", { name: "Learn More" });
+    link.addEventListener("click", (event) => event.preventDefault());
+    await userEvent.click(link);
     await expect(primaryClick).toHaveBeenCalled();
   },
 };

src/components/molecules/HeroActions/HeroActions.stories.tsx

@@ -38,6 +38,7 @@ export const ActionButtonLink: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole("link", { name: "About Us" });
+    link.addEventListener("click", (event) => event.preventDefault());
     await userEvent.click(link);
     await expect(link).toHaveAttribute("href", "/about");
   },

src/components/organisms/CallToActionSection/CallToActionSection.stories.tsx

@@ -44,6 +44,7 @@ export const PrimaryActionLink: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole("link", { name: "Learn More" });
+    link.addEventListener("click", (event) => event.preventDefault());
     await userEvent.click(link);
     await expect(link).toHaveAttribute("href", "/about");
   },

src/components/organisms/HomeHero/HomeHero.stories.tsx

@@ -35,6 +35,7 @@ export const NavigatesToLink: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole("link", { name: "About" });
+    link.addEventListener("click", (event) => event.preventDefault());
     await userEvent.click(link);
     await expect(link).toHaveAttribute("href", "/about");
   },

src/components/organisms/Navbar/Navbar.stories.tsx

@@ -0,0 +1,33 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { playwright } from "@vitest/browser-playwright";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { defineConfig } from "vitest/config";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        plugins: [
+          storybookTest({
+            configDir: path.join(dirname, ".storybook"),
+            storybookScript: "bun run storybook -- --no-open",
+          }),
+        ],
+        test: {
+          name: "storybook",
+          browser: {
+            enabled: true,
+            provider: playwright({}),
+            headless: true,
+            instances: [{ browser: "chromium" }],
+          },
+          setupFiles: ["./.storybook/vitest.setup.ts"],
+        },
+      },
+    ],
+  },
+});