Using Storybook as both a visual library and test code

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 do npm install -g @storybook/cli
• If you are using yarn do yarn 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 and config.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.