Storybook Has a Free API You're Not Using

Storybook 8 ships with powerful APIs that go far beyond component previews. Most teams use 10% of what Storybook offers. The Free APIs You're Missing 1. play() — Interaction Testing Inside Stories import { within , userEvent , expect } from " @storybook/test " ; export const LoginFlow : Story = { play : async ({ canvasElement }) => { const canvas = within ( canvasElement ); await userEvent . type ( canvas . getByLabelText ( " Email " ), " user@test.com " ); await userEvent . type ( canvas . getByLabelText ( " Password " ), " secret " ); await userEvent . click ( canvas . getByRole ( " button " , { name : " Sign In " })); await expect ( canvas . getByText ( " Welcome back! " )). toBeInTheDocument (); }, }; Interactive tests that run inside the browser. See exactly what happens when users interact with your components. 2. Loaders — Async Data for Stories export const WithUserData : Story = { loaders : [ async () => ({ user : await fetch ( " /api/users/1 " ). then ( r => r . json ()), }),