New
I18n with StorybookAutomate with Chromatic
Star74,144

Create a reproduction

A reproducible test case lets you isolate the cause of a problem, which is the first step towards fixing it! This page outlines how to get set up to create a reproduction.

Why should you create a reproduction?

A reproducible test case is a great way to share a specific set of conditions that causes a bug. It allows both the maintainers and the community to verify, narrow down the cause of the problem and help you fix the issue.

Pre-requisites

Make sure you have:

Initial setup

First, open a terminal and run the following command:

๐Ÿ’ก You can add the --template flag to include a custom template.

Next, select the framework, for example, react:

Storybook reproduction generator framework selector

Then, choose the template you want to work with:

Storybook reproduction generator template

Finally, enter a location for your reproduction:

Storybook reproduction location

๐Ÿ’ก If you don't provide a full path for the reproduction it will be generated in the current directory.

If everything worked as it should, you should have a fully functional Storybook set up in your local environment.

Third-party dependencies & addons

Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., Tailwind), you should install and configure it.

Install and configure any Storybook addons that relate to the issue (e.g.,@storybook/addon-a11y).

Add stories

Any Storybook reproduction wouldn't be complete without stories. To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.

Host

When you've finished your work, you'll need to host your reproduction. Start by signing into GitHub.com and create a new repository.

github repository for reproductions

Then, follow GitHub's instructions to set up the repository.

github repository instructions

๐Ÿ’ก Don't forget to replace your-username with your own account name.

Publish

An excellent way to check your reproduction is to have it deployed online. We recommend Chromatic, a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.

Helpful resources when working with Chromatic

Submit the issue

Finally, create your issue in the Storybook issue tracker, go through the required steps, and provide a detailed description of the problem. Add the GitHub repository and deployed reproduction to help with the triage process.

โœ๏ธ Edit on GitHub โ€“ PRs welcome!
Join the community
5,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI