Visual Testing with Storybook
Knowing your components look as intended in every permutation is not only a great way to test them visually, but also provides “living documentation” for them. This makes it easier for teams to:
- know what components are available to them in a given project and
- what props those components accept and what all of the states of that component are.
As your project grows over time having this information available will be invaluable. This is the function of the Storybook library. Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively.
To set up Storybook you need to install dependencies and do some custom configuration. First, install the Storybook CLI.
Once the CLI is installed, the next step is to run the
sb init command that is now available from the root directory of your Gatsby project.
Note that if you’re running a recent version of
npm(5.2.0+) you can run the following single command instead:
npx -p @storybook/cli sb init, which is the recommended method by Storybook. This doesn’t install the CLI on your machine, thereby ensuring you’re always running the latest version of the CLI.
sb init command bootstraps the basic config necessary to run Storybook for a React project. However, since this is for a Gatsby project, you need to update the default Storybook configuration a bit so you don’t get errors when trying to use Gatsby specific components inside of the stories.
To update your Storybook config open
.storybook/config.js and modify the content as follows:
You can remove the
storiesfolder from the root of your project, or move it inside your
Next make some adjustments to Storybook’s default
webpack configuration so you can transpile Gatsby source files, and to ensure you have the necessary
babel plugins to transpile Gatsby components.
Create a new file called
webpack.config.js in the
.storybook folder created by the Storybook CLI. Then place the following code in that file (depending on which version of Storybook you’re using):
For Storybook v5:
Note that if you’re using a StaticQuery in your components,
babel-plugin-remove-graphql-queriesis required to render them in Storybook. This is because the queries are run at build time in Gatsby, and will not have been run when rendering the components directly.
When using TypeScript, add this rule:
For Storybook v4:
Once you have this configured you should run Storybook to ensure it can start up properly and you can see the default stories installed by the CLI. To run storybook:
Storybook CLI adds this command to your
package.json for you so you shouldn’t have to anything other than run the command. If Storybook builds successfully you should be able to navigate to http://localhost:6006 and see the default stories supplied by the Storybook CLI.
However, if you use
useStaticQuery in your project Storybook needs to be run with the
NODE_ENV set to
production (as Storybook sets this by default to
babel-plugin-remove-graphql-queries won’t be run. Moreover Storybook needs to know about static files generated by Gatsby’s
StaticQuery. Your scripts should look like:
A full guide to writing stories is beyond the scope of this guide, but we’ll take a look at creating a story.
First, create the story file. Storybook looks for all files with a
.stories.js extension and loads them into Storybook for you. Generally you will want your stories near where the component is defined, however since this is Gatsby, if you want stories for your pages, you will have to create those files outside of the
A good solution is to create a
__stories__directory next to your
pagesdirectory and put any page stories in there.
This is a very simple story without much going on, but honestly, nothing else really changes as related to Gatsby. If you want to learn more about how Storybook works and what you can do with it, check out some of the resources listed below.
- For more information on Storybook, visit the Storybook site.
- Get started with a Jest and Storybook starter
Edit this page on GitHub