Using Storybook as both a visual library and test code
Tags: jest, react, storybook
Published: 2018-07-31 01:17:01

---
title: Using Storybook as both a visual library and test code
published: true
tags: jest,react,storybook
canonical_url: 
---

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](https://dev.to/davidimoore/using-fixtures-for-testing-a-reactredux-app-with-jest--enzyme-3hd0) 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](https://jestjs.io/docs/en/snapshot-testing#snapshot-testing-with-jest) 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](https://github.com/storybooks/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](https://facebook.github.io/watchman/docs/install.html) 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:

[  
 ![](http://dmohq.com/wp-content/uploads/2018/07/storybook-welcome-screen-800x424.png)  
](http://dmohq.com/wp-content/uploads/2018/07/storybook-welcome-screen-e1532906435668.png)

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:

[  
 ![](http://dmohq.com/wp-content/uploads/2018/07/user-list-story-800x399.png)  
](http://dmohq.com/wp-content/uploads/2018/07/user-list-story.png)

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.