DEV Community

Alex Spinov
Alex Spinov

Posted on

Storybook Has a Free API You're Not Using

#storybook #react #testing #webdev

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();
  },
};
Enter fullscreen mode Exit fullscreen mode

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()),
    }),
  ],
  render: (args, { loaded: { user } }) => <UserProfile user={user} {...args} />,
};
Enter fullscreen mode Exit fullscreen mode

Fetch real data before rendering. Test components with actual API responses.

3. Parameters — Global Component Configuration 

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: "dark" },
    viewport: { defaultViewport: "mobile1" },
    layout: "fullscreen",
    chromatic: { viewports: [320, 768, 1200] },
  },
};
Enter fullscreen mode Exit fullscreen mode

4. Decorators — Wrap Stories with Context 

const withTheme = (Story, context) => (
  <ThemeProvider theme={context.globals.theme === "dark" ? darkTheme : lightTheme}>
    <Story />
  </ThemeProvider>
);

export default {
  decorators: [withTheme],
};
Enter fullscreen mode Exit fullscreen mode

5. Test Runner — CI/CD Component Testing 

npx test-storybook --coverage
Enter fullscreen mode Exit fullscreen mode 
// package.json
{
  "scripts": {
    "test:storybook": "test-storybook",
    "test:storybook:ci": "concurrently -k -s first -n SB,TEST \"storybook dev --ci\" \"wait-on tcp:6006 && test-storybook\""
  }
}
Enter fullscreen mode Exit fullscreen mode

Run all interaction tests in CI. Every story becomes a test.

Getting Started 

npx storybook@latest init
npm run storybook
Enter fullscreen mode Exit fullscreen mode

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: Spinov001@gmail.com

Check out my awesome-web-scraping list for the best scraping tools and resources.

Top comments (0)