What problem does it solve? Frontend tests often drift into inconsistent shapes: connected components get stripped into presentational shells, mocks are hand-written and untyped, and sibling test files re-prove what a story's play function already covers. This Skill enforces a single canon for writing and reviewing every React frontend test — stories, colocated tests, and the integration harness they run against. ## Core Features & Use Cases - Dumb vs connected decision framework: Story presentational components with plain StoryObj args, and story data-owning components as-is using parameters.route, parameters.stores, and typed MSW helpers (mockQuery, loadingQuery, errorQuery, mockMutation, mockSession) keyed off SDK query options. - Story-as-fixture testing: Run stories in bun test via composeStories, with three sanctioned sibling lanes (*.services.test.tsx for a real gateway subprocess, harness-backed .test.tsx, and a documented reduced lane) that each prove a different boundary. - Integration harness by default: Assert real backend behavior through useIntegrationBackend() and mountRouter, with architecture rails that fail any test mounting RouterProvider without router.load() or stubbing globalThis.fetch. - Use Case: When adding a *.stories.tsx for a dashboard section that reads route search params and SDK queries, declare connected({ route: { id } }) parameters and typed DeepPartial mocks, then verify with tsc, storybook:build, and bun test. ## Quick Start Ask the agent to write a Storybook story and colocated test for a connected React component following the storybook skill's registry patterns.
