After creating a React component and testing it, you still need to see what it looks like. But you may not have a view or
parent component ready to render it with.
In my previous article I created a redux connected UserListContainer
that fetched users from a remote source. I also created a UserList
presentational component to render the fetched users.
Additionally I generated jest snapshots for our
components.
Lastly I used reusable data or fixtures in my tests.
Let’s say you want to render the UserList
component (and its container) in another component like UserListView
. But UserListView
isn’t complete.
What if you simply want to see what UserList
looks like before adding it anywhere else in your app temporarily?
This is where Storybook provides a really practical solution. Storybook lets you view your components in isolation. So we could see our UserList
with some sample users.
In this article I will do the following:
- Add Storybook to the app
- Create stories for my
UserList
component - Create snapshots from those stories
If you want to follow along do the following to checkout this blog’s code example “start” branch:
git clone -b start git@github.com:davidimoore/blog-article-2.git
To get the completed repo
git clone git@github.com:davidimoore/blog-article-2.git
Step 1 – Add Storybook
First let’s install storybook. For this project I’m installing it globally.
- If you are using
npm
donpm install -g @storybook/cli
- If you are using
yarn
doyarn global add @storybook/cli
- You will also need to install watchman for macs and homebrew
brew install watchman
Next lets add Storybook to our project. In the root of the project run getstorybook
.
In our package.json
file in the scripts
section we should see the following has been added:
"scripts": {
...
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
Run yarn storybook
and then go to http://localhost:9009
in your browser. You should see the following:
Storybook also added 2 directories
- .storybook contains
addons.js
andconfig.js
- stories which has some example code.
Step 2 – Create a UserList story
Let’s add a UserList
story when we have users passed into the component. We can use the same fixture file from our
we imported in __test__ /components/UserList.test.jsx
// src/stories/UserList.jsx
import React from "react";
import { storiesOf } from "@storybook/react";
import UserList from "components/UserList";
import reducedUsers from " __fixtures__ /reducedUsers";
storiesOf("UserList", module).add("with users", () => (
<UserList users={reducedUsers} />
));
We also will need to update our src/stories/index.js
file to require our new story. Let’s remove the Welcome story and only load our new UserList
story.
require("./UserList");
The Storybook web page should auto reload and we should see:
It’s not an artistic achievement but we now have an idea of what our table looks like without having to render it in
our app.
Step 3 – Create storybook generated snapshots with StoryShots
Instead of generating our snapshots with our tests we can also generate them with what our stories render. It’s arugably preferable because you are capturing a component based on what it looks like and not simply what it’s programitic structure is. To do that let’s add StoryShots.
Either npm install --save-dev @storybook/addon-storyshots
or yarn add -D @storybook/addon-storyshots
Next we create a test to run Storyshots
// src/ __tests__ /Storyshots.test.js
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
Next run our tests and a new snapshot will be created in our __tests__ / __snapshots__
directory. At this point you could delete the original snapshot for the UserStory
component since it renders an identical structure.
Summary
Storybook is a great way to view your components in an isolated sandbox. With Storyshots that same view can generate a snapshot test whenever you run your test suite.
Top comments (0)