https://storybook.js.org/

Storybook allows developers to create UI components in isolation of the rest of the app. This allows them to iterate faster, encourages the creation of reusable components, and reduces the chances that features are delivered that don't meet requirements. Of course Storybook provides their own arguments in favor.

Each story captures a component in a given state. You might have a story for your component as it looks on desktop, and another as it looks on mobile.

All the stories for a given component <component>.js will be in a file <component>.stories.js in the same folder. To create your first story, follow the docs here. Usually to get a story to work, you'll have to mock the props and any APIs being used by the component; look at Tree.stories.js as an example of how to do this.

Creating stories is completely optional; you can create a new component without making corresponding stories. However, it is recommended to make stories for your benefit to speed up your development process.

To run Storybook in your local environment and see your stories do:

npm run storybook

You may find that your story and the jest unit test are sharing the same data and mocks. In that case, you can use composeStories() to pull the story into your Jest test (see the "Usage" section here for more info).