Storybook Addon State Testing
Visually test state transitions
Development scripts
yarn start
runs babel in watch mode and starts Storybookyarn build
build and package your addon code
Setup in other projects/stories
Install the addon
npm install storybook-state-addon
Register the addon in .storybook/main.js
"addons": [
...
"storybook-state-addon"
],
When you run Storybook, you should see a State Transition
panel in the addons panel.
Usage
In your stories, use parameters
to pass a stateMachine
array to the addon. The array should contain objects that represent Storybook args (component props) for different states you want to test. You can transition through state manually my clicking the Increment state
and Decrement state
buttons in the State Transition
panel. You can also play all the state transitions automatically by clicking the Play State
button which will trigger all state transition automatically from the beginning with a delay (the delay is in milliseconds specified in the input field).
parameters: {
stateMachine: [
{ label: "State 1" },
{ label: "State 2" },
{ label: "State 3" },
],
},
Example
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof Button> = {
title: "Example/Button",
component: Button,
},
};
export default meta;
type Story = StoryObj<typeof Button>;
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Primary: Story = {
// More on args: https://storybook.js.org/docs/react/writing-stories/args
args: {
primary: true,
label: "Button",
},
parameters: {
stateMachine: [
{ label: "State 1" },
{ label: "State 2" },
{ label: "State 3" },
],
},
};