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. The solution is a three-layer mock strategy:

1. Vite plugin — intercepts module resolution at build time
2. Resolve aliases — redirects server imports to stub files
3. Decorators — provides Router, Query, and Theme context