Add a first working test, backed by the storybook

Author: pimterry

.storybook/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from '@storybook/react-vite';
+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
+setProjectAnnotations([projectAnnotations]);

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "build": "rimraf dist/ && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.web.json",
     "pretest": "npm run build",
-    "test": "echo \"It built ok, that'll do for now\"",
+    "test": "vitest --run",
     "prepare": "npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o examples"
@@ -42,18 +42,22 @@
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/react": "^9.1.10",
     "@storybook/react-vite": "^9.1.10",
+    "@testing-library/react": "^16.3.0",
     "@types/events": "^3.0.0",
     "@types/node": "^24.6.2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.55.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^3.0.0",
     "storybook": "^9.1.10",
     "typescript": "^5.9.3",
     "vite": "^7.1.8",
-    "vite-plugin-checker": "^0.11.0"
+    "vite-plugin-checker": "^0.11.0",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

tests/.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cd:*)",
+      "Bash(/dev/null)",
+      "Bash(echo \"Exit code: $?\")"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

tests/html.test.tsx

@@ -0,0 +1,17 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { composeStory } from '@storybook/react';
+import * as stories from '../stories/html.stories';
+
+const RenderThingsInDifferentPlaces = composeStory(
+  stories.RenderThingsInDifferentPlaces,
+  stories.default
+);
+
+test('RenderThingsInDifferentPlaces', async () => {
+  const { container } = render(<RenderThingsInDifferentPlaces />);
+
+  expect(container.innerHTML).toContain(
+    '<div>Portal renders here:<div>Hi!</div></div>'
+  );
+});

vite.config.ts

@@ -1,6 +1,20 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
-});
+  test: {
+    include: ['tests/**/*.test.{ts,tsx}'],
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: 'playwright',
+      screenshotFailures: false,
+      instances: [{
+        browser: 'chromium'
+      }]
+    },
+    setupFiles: ['.storybook/vitest.setup.ts']
+  }
+});