Storybook Play Function Testing

Integration tests that render real components in a real browser. No mocks of what you own — mock only the server boundary, then test real behavior through real DOM interactions.

When to Use

• Setting up Storybook in a TanStack Start/Router project
• Writing stories for route-level pages or shared components
• Adding play function interaction tests
• Testing form flows, state transitions, edge cases
• Verifying responsive behavior (desktop + mobile)

The Problem: TanStack Start + Storybook

TanStack Start has SSR, server functions (createServerFn), Cloudflare Workers entry points, and a generated route tree — all of which crash in Storybook's browser-only preview.

Setup

Using the published addon (recommended)