GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

IMPROVE docs

Browse Source
This commit is contained in:
Norbert de Langen 2017-05-26 19:18:41 +02:00
parent 7964734eb6
commit d0ea916638
17 changed files with 177 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/pages/404.md
View File

@ -5,3 +5,6 @@ path: /404.html
# NOT FOUND
You just hit a route that doesn't exist... the sadness.
We're working on improving this page, sorry.
[Go to the main page](/)

71
docs/pages/addons/addon-gallery/index.md
View File

@ -5,7 +5,7 @@ title: 'Addon Gallery'
This is a list of available addons for Storybook.
## Built-In Addons.
## Addons maintained by storybook team.
These addons ship with Storybook by default. You can use them right away.
@ -17,21 +17,7 @@ Also, you can think of this as a way to document events in your components.
### [Links](https://github.com/storybooks/storybook/tree/master/addons/links)
With links you can link stories together. With that, you can build demos and prototypes directly from your UI components. (Like you can do with [Invision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))
## Third Party Addons
You need to install these addons directly from NPM in order to use them.
### [Host](https://github.com/philcockfield/storybook-host)
A [decorator](/addons/introduction) with
powerful display options for hosting, sizing and framing your components.
### [Specs](https://github.com/mthuret/storybook-addon-specifications)
This is a very special addon where it'll allow you to write test specs directly inside your stories.
You can even run these tests inside a CI box.
With links you can link stories together. With that, you can build demos and prototypes directly from your UI components.
### [Knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
@ -50,34 +36,45 @@ If you are using Storybook as a style guide, then this addon will help you to bu
The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default.
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
With this addon, you can showcase multiple components (or varying component states) within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
## Community Addons
You need to install these addons directly from NPM in order to use them.
### [README](https://github.com/tuchk4/storybook-readme)
With this addon, you can add docs in markdown format for each story.
It very useful because most projects and components already have README.md files.
Now it is easy to add them into your Storybook.
### [Story-router](https://github.com/gvaldambrini/storybook-router)
A [decorator](/addons/introduction) that allows you to integrate react-router components in your stories.
### [Host](https://github.com/philcockfield/storybook-host)
A [decorator](/addons/introduction) with powerful display options for hosting, sizing and framing your components.
### [Specs](https://github.com/mthuret/storybook-addon-specifications)
This is a very special addon where it'll allow you to write test specs directly inside your stories.
You can even run these tests inside a CI box.
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
With this addon, you can showcase multiple components (or varying component states) within 1 story.
Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
Given possible values for each prop, renders your component with all combinations of prop values.
Useful for finding edge cases or just seeing all component states at once.
### [Backgrounds](https://github.com/NewSpring/react-storybook-addon-backgrounds)
With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)
Wraps your story into MuiThemeProvider. It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file
### [README](https://github.com/tuchk4/storybook-readme)
With this addon, you can add docs in markdown format for each story. It very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook.
Wraps your story into MuiThemeProvider.
It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file
### [i18n tools](https://github.com/joscha/storybook-addon-i18n-tools)
With this addon, you can test your storybooks with a different text-direction. It is very useful if you are working on components that have to work both in LTR as well as in RTL languages.
### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.
### [StoryRouter](https://github.com/gvaldambrini/storybook-router)
A [decorator](/addons/introduction) that allows you to integrate react-router components in your stories.
With this addon, you can test your storybooks with a different text-direction.
It is very useful if you are working on components that have to work both in LTR as well as in RTL languages.
### [JSX preview](https://github.com/Kilix/storybook-addon-jsx)
This addon shows a preview of the JSX code for each story. It allows you to configure the display and copy the code with a single click.
This addon shows a preview of the JSX code for each story.
It allows you to configure the display and copy the code with a single click.

2
docs/pages/addons/introduction/index.md
View File

@ -93,8 +93,6 @@ For example, [storybook-actions](https://github.com/storybooks/storybook/tree/ma
![Demo of Storybook Addon Actions](../static/addon-actions-demo.gif)
> This addon ships with Storybook by default. [Check here](https://github.com/storybooks/storybook/tree/master/addon/actions) for more info.
It will allow you to inspect the parameters of any event of your components.
See the following links to learn more about native addons:

4
docs/pages/addons/using-addons/index.md
View File

@ -33,10 +33,10 @@ Now when you are writing a story it like this and add some notes:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import Button from './Button';
import { WithNotes } from '@storybook/addon-notes';
import Button from './Button';
storiesOf('Button', module)
.add('with some emoji', () => (
<WithNotes notes={'Here we use some emoji as the Button text. Doesn&apos;t it look nice?'}>

8
docs/pages/addons/writing-addons/index.md
View File

@ -43,9 +43,10 @@ We write a story for our addon like this:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './Button';
import { WithNotes } from '../notes-addon';
import Button from './Button';
storiesOf('Button', module)
.add('with text', () => (
<WithNotes notes={'This is a very simple Button and you can click on it.'}>
@ -133,9 +134,10 @@ That's it. Now you can create notes for any story as shown below:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './Button';
import { WithNotes } from '../notes-addon';
import Button from './Button';
storiesOf('Button', module)
.add('with text', () => (
<WithNotes notes={'This is a very simple Button and you can click on it.'}>
@ -166,11 +168,9 @@ When you are developing your addon as a package, you can't use `npm link` to add
```json
{
...
"dependencies": {
"@storybook/addon-notes": "file:///home/username/myrepo"
}
...
}
```

9
docs/pages/basics/introduction/index.md
View File

@ -3,13 +3,16 @@ id: 'introduction'
title: 'Introduction'
---
React Storybook is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively.
React Storybook is a UI development environment for your React components.
With it, you can visualize different states of your UI components and develop them interactively.
React Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
React Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
![React Storybook](../static/screenshot.png)
React Storybook also comes with a lot of [addons](/addons/introduction) and a great API to customize as you wish. You can also build a [static version](/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
React Storybook also comes with a lot of [addons](/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
Here are some featured storybooks that you can reference to see how Storybook works:

2
docs/pages/basics/quick-start-guide/index.md
View File

@ -7,7 +7,7 @@ React Storybook is very easy to use. You can use it with any kind of React proje
Follow these steps to get started with Storybook.
```sh
npm i -g getstorybook
npm i -g @storybook/cli
cd my-react-app
getstorybook
```

21
docs/pages/basics/writing-stories/index.md
View File

@ -104,10 +104,13 @@ configure(function () {
## Managing stories
Storybook has a very simple API to write stories. With that, you can’t display nested stories.
_**This is something we've done purposely.**_
Storybook has a very simple API to write stories.
With that, you can’t display nested stories.
But you might ask, how do I manage stories If I have many of them? Here's how different developers address this issue. Therefore, there's no need to build a built-in feature for this (at least in the short term).
But you might ask, how do I manage stories If I have many of them?
We're currently very much interested in changing our api to support this!
Until that's implemented, here's how different developers address this issue, right now:
### Prefix with dots
@ -119,6 +122,10 @@ storiesOf('core.Button', module)
Then you can filter stories to display only the stories you want to see.
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
With this addon, you can showcase multiple components (or varying component states) within 1 story.
Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
### Run multiple storybooks
You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See:
@ -131,11 +138,3 @@ You can run multiple storybooks for different kinds of stories (or components).
}
}
```
### Use multiple repos
This is a popular option. You can create different repos for different kinds of UI components and have a storybook for each of them. Here are some ways to separate them:
- Have one repo for the theme, and one for the app.
- Have one repo for each UI component and use those in different apps.
- Have a few repos for different kinds of UI components and use them in different apps.

34
docs/pages/configurations/cli-options/index.md
View File

@ -11,25 +11,29 @@ Here are all those options:
## For start-storybook
Usage: start-storybook [options]
```
Usage: start-storybook [options]
Options:
Options:
-h, --help output usage information
-V, --version output the version number
-p, --port [number] Port to run Storybook (Required)
-h, --host [string] Host to run Storybook
-s, --static-dir <dir-names> Directory where to load static files from
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
-h, --help output usage information
-V, --version output the version number
-p, --port [number] Port to run Storybook (Required)
-h, --host [string] Host to run Storybook
-s, --static-dir <dir-names> Directory where to load static files from
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
```
## For build-storybook
Usage: build-storybook [options]
```
Usage: build-storybook [options]
Options:
Options:
-h, --help output usage information
-V, --version output the version number
-s, --static-dir <dir-names> Directory where to load static files from
-o, --output-dir [dir-name] Directory where to store built files
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
-h, --help output usage information
-V, --version output the version number
-s, --static-dir <dir-names> Directory where to load static files from
-o, --output-dir [dir-name] Directory where to store built files
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
```

6
docs/pages/configurations/custom-babel-config/index.md
View File

@ -3,9 +3,11 @@ id: 'custom-babel-config'
title: 'Custom Babel Config'
---
By default, Storybook loads your root `.babelrc` file and load those configurations. But sometimes some of those options may cause Storybook to throw errors.
By default, Storybook loads your root `.babelrc` file and load those configurations.
But sometimes some of those options may cause Storybook to throw errors.
In that case, you can provide a custom `.babelrc` just for Storybook. For that, simply create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`).
In that case, you can provide a custom `.babelrc` just for Storybook.
For that, simply create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`).
Then Storybook will load the Babel configuration only from that file.

25
docs/pages/configurations/custom-webpack-config/index.md
View File

@ -3,13 +3,17 @@ id: 'custom-webpack-config'
title: 'Custom Webpack Config'
---
**NOTE: Storybook doesn't currently support webpack 2, so write your storybook webpack config to be webpack 1.x-compatable.**
## Default mode
The default Webpack config of React Storybook is usually well balanced for a medium-size React project (specially created with [Create React App](https://github.com/facebookincubator/create-react-app)) or a library. But if you already have your own Webpack setup, that's not useable.
The default Webpack config of Storybook is balanced for a medium-size project (specially created with [Create React App](https://github.com/facebookincubator/create-react-app)) or a library. But if you already have your own Webpack setup, that's not useable.
That's why we allow you to customize our Webpack setup. There are a few ways to do it. Let's discuss:
That's why we allow you to customize our Webpack setup by providing a `webpack.config.js` file exporting a **webpack 2** compatible config exported as a **commonjs module**.
## Simple Mode
There are a few ways to do it:
## Extend Mode
You'll get *extend-mode* by returning an object.
Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. This is how to do it.
Simply add the following content to a file called `webpack.config.js` in your Storybook config directory (`.storybook` by default ).
@ -45,9 +49,13 @@ But you won't be able to change the following config options:
- output
- js loader with babel
For the advanced usage we strongly recommend [full control mode](#full-control-mode).
## Full Control Mode
Sometimes, you will want to have full control over the webpack configuration. Maybe you want to add different configurations for dev and production environments. That's where you can use our full control mode.
Sometimes, you will want to have full control over the webpack configuration.
Maybe you want to add different configurations for dev and production environments.
That's where you can use our full control mode.
To enable that, you need to export a **function** from the above `webpack.config.js` file, just like this:
@ -78,11 +86,14 @@ Storybook uses the config returned from the above function. So, try to edit the
Other than that, you should try to keep the default set of plugins.
## Extending The Default Config
## Full control mode + default
You may want to keep Storybook's [default config](/configurations/default-config), but just need to extend it. If so, this is how you do it using the Full Control Mode.
You may want to keep Storybook's [default config](/configurations/default-config), but just need to extend it.
If so, this is how you do it using the Full Control Mode.
Add following content to the `webpack.config.js` in your Storybook config directory.
> We plan to expose our default webpack-config as it's own package in the future.
```js
// load the default config generator.
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

28
docs/pages/configurations/default-config/index.md
View File

@ -8,19 +8,24 @@ Let's learn about the default config comes with Storybook.
## Babel
We use Babel for JavaScript(ES6) transpiling. Here are some key features of Storybook's Babel configurations.
We use Babel for JavaScript(ES6) transpiling.
Here are some key features of Storybook's Babel configurations.
### ES2016+ Support
We have added ES2016 support with Babel for transpiling your JS code. In addition to that, we've added a few experimental features, like object spreading and async await. Check out our [source](https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/babel.js#L19) to learn more about these plugins.
We have added ES2016 support with Babel for transpiling your JS code.
In addition to that, we've added a few experimental features, like object spreading and async await.
Check out our [source](https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/babel.js#L19) to learn more about these plugins.
### .babelrc support
If your project has a `.babelrc` file, we'll use that instead of the default config file. So, you could use any babel plugins or presets that you have used in your project with Storybook.
If your project has a `.babelrc` file, we'll use that instead of the default config file.
So, you could use any babel plugins or presets that you have used in your project with Storybook.
## Webpack
We use Webpack to serve and load JavaScript modules for the web. We've added some Webpack loaders to bring some good defaults. (This setup is very close to what you get with the [Create React App](https://github.com/facebookincubator/create-react-app).)
We use Webpack to serve and load JavaScript modules for the web.
We've added some Webpack loaders to bring some good defaults. (This setup is very close to what you get with the [Create React App](https://github.com/facebookincubator/create-react-app).)
### CSS Support
@ -38,7 +43,8 @@ import 'bootstrap/dist/css/bootstrap.css';
### Image and Static File Support
You can also import images and media files directly via JavaScript. This helps you to write stories with media files easily. This is how to do it:
You can also import images and media files directly via JavaScript.
This helps you to write stories with media files easily. This is how to do it:
```js
import React from 'react';;
@ -52,17 +58,17 @@ storiesOf('<img>', module)
));
```
When you are building a storybook, we'll also export the imported image. So, this is a good approach to loading all of your static content.
When you are building a storybook, we'll also export the imported image.
So, this is a good approach to loading all of your static content.
> Storybook also has a way to mention static directories via the -s option of the `react-storybook` and `build-storybook` commands.
### JSON Loader
You can import `.json` files, as you do with Node.js. This will also allow you to use NPM projects, which imports `.json` files inside them.
You can import `.json` files, as you do with Node.js.
This will also allow you to use NPM projects, which imports `.json` files inside them.
## NPM Modules
You can use any of the NPM modules installed on your project. You can simply import and use them.
> Unfortunately, we don't support Meteor packages. If your UI component includes one or more Meteor packages, try to avoid using them in UI components.
> If they are containers, you can use [React Stubber](https://github.com/kadirahq/react-stubber) to use them in Storybook.
You can use any of the NPM modules installed on your project.
You can simply import and use them.

17
docs/pages/configurations/serving-static-files/index.md
View File

@ -62,6 +62,23 @@ storiesOf('<img>', module)
> }
> ```
## 3. Via a CDN
Upload your files to an online CDN and just reference them.
In this example we're using a placeholder image service.
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
// assume image.png is located in the "public" directory.
storiesOf('<img>', module)
.add('with a image', () => (
<img src="https://placehold.it/350x150" />
));
```
## Absolute versus relative paths
Sometimes, you may want to deploy your storybook into a subpath, like <https://kadira-samples.github.io/react-button>.

2
docs/pages/testing/css-style-testing/index.md
View File

@ -27,4 +27,4 @@ Just like that, you can access all of the stories in your Storybook.
It will be hard to use all the frameworks we've [mentioned](/testing/react-ui-testing#3-css-style-testing), but we'll be able to use frameworks which are based on URL as the input source. (Such as [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini))
> In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storyshots).
> In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots).

15
docs/pages/testing/manual-testing/index.md
View File

@ -3,17 +3,20 @@ id: 'manual-testing'
title: 'Manual Testing'
---
Now we arrive at the most interesting (but also hardest) part of UI testing. We usually do this as a team.
Now we arrive at the most interesting (but also hardest) part of UI testing.
We usually do this as a team.
First, we need to make a pretty solid Storybook or a set of Storybooks covering most of the scenarios of our UI components. For that we can follow the following structure:
First, we need to make a pretty solid Storybook or a set of Storybooks covering most of the scenarios of our UI components.
For that we can follow the following structure:
- Write stories for your individual UI components.
- Write another set of stories for integrating the above UI components (you could consider your pages).
For the individual UI components, you may be using a different repository. Then, keep a storybook inside it for those components. Then, in the main app, write stories for integrations.
For the individual UI components, you may be using a different repository.
Then, keep a storybook inside it for those components. Then, in the main app, write stories for integrations.
## Testing Plan
Open a new PR (or multiple of them). Then run your Storybook and start reviewing one story at a time. Then you can comment on the PR.
> Join our [Newsletter](http://tinyletter.com/storybooks) or [Slack Team](https://storybooks-slackin.herokuapp.com/) to get updates.
Open a new PR (or multiple of them).
Then run your Storybook and start reviewing one story at a time.
Then you can comment on the PR.

31
docs/pages/testing/react-ui-testing/index.md
View File

@ -3,11 +3,13 @@ id: 'react-ui-testing'
title: 'Introduction: React UI Testing'
---
There are different aspects we need to look at when testing UI. There are also a lot of tools and techniques we can use. 
There are different aspects we need to look at when testing UI.
There are also a lot of tools and techniques we can use. 
## Reasons for Testing
Before we talk about testing, we need to think about why we need to test. There are many reasons; here are some of our reasons:
Before we talk about testing, we need to think about why we need to test.
There are many reasons; here are some of our reasons:
- To find bugs.
- To make sure things won't break between new code commits.
@ -21,7 +23,8 @@ We refer UI for many things. To put this in focus, let's narrow it down to Rea
### 1. Structural Testing
Here we'll focus on the structure of the UI and how it's laid out. For an example, let's say we have a "login component" as shown below:
Here we'll focus on the structure of the UI and how it's laid out.
For an example, let's say we have a "login component" as shown below:
![Login Form](../static/login_form.png)
@ -36,7 +39,9 @@ For React, we have been using [Enzyme](https://github.com/airbnb/enzyme) as a wa
### 2. Interaction Testing
UI is all about interacting with the user. We do this with a bunch of UI elements, such as buttons, links, and input elements. With interaction testing, we need to test if they are working properly.
UI is all about interacting with the user.
We do this with a bunch of UI elements, such as buttons, links, and input elements.
With interaction testing, we need to test if they are working properly.
Let's again use the above login component as an example. It should do these things:
@ -47,9 +52,12 @@ We have few ways to do this type of testing with React. The simple way is to us
### 3. CSS/Style Testing
UI is all about styles (whether they're simple, beautiful, or even ugly). With style testing, we are evaluating the look and feel of our UI components between code changes. This is a pretty complex subject and usually we do it by comparing images.
UI is all about styles (whether they're simple, beautiful, or even ugly).
With style testing, we are evaluating the look and feel of our UI components between code changes.
This is a pretty complex subject and usually we do it by comparing images.
If we are using inline styles all the way, we can use JEST snapshot testing. But to get even better results, we should consider using tools such as:
If we are using inline styles all the way, we can use JEST snapshot testing.
But to get even better results, we should consider using tools such as:
- [BackstopJS](https://github.com/garris/BackstopJS)
- [PhantomCSS](https://github.com/Huddle/PhantomCSS)
@ -58,15 +66,20 @@ If we are using inline styles all the way, we can use JEST snapshot testing. But
### 4. Manual Testing
All the above sections are about testing with automated tools. But since we are building UI for humans, we must also manually test them to see how they feel.
All the above sections are about testing with automated tools.
But since we are building UI for humans, we must also manually test them to see how they feel.
Another reason for manual testing is for the better user experience.
We should always try to test our UI with the naked eye. For this, we can simply use our existing Storybook.This is something that we can't automate(yet) and takes time. But it would be great if we could do this once in a while (especially with a major code changes).
We should always try to test our UI with the naked eye.
For this, we can simply use our existing Storybook.
This is something that we can't automate(yet) and takes time.
But it would be great if we could do this once in a while (especially with a major code changes).
## How Storybook Can Help Us
A **story** is a smallest unit in Storybook. It's a fully functioning UI element where the input can be used for any of the testing methods we've mentioned above.
A **story** is a smallest unit in Storybook.
It's a fully functioning UI element where the input can be used for any of the testing methods we've mentioned above.
Let's look at how Storybook can help you do the above mentioned different aspects of testing.

14
docs/pages/testing/structural-testing/index.md
View File

@ -3,11 +3,15 @@ id: 'structural-testing'
title: 'Structural Testing'
---
For React, [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) is the best way to do Structural Testing. It's painless to use and maintain. We've integrated Jest's snapshot testing directly into Storybook using a new tool called [StoryShots](https://github.com/storybooks/storyshots). Now we can simply use existing stories as the input for snapshot testing.
For React, [Jest's snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) is the best way to do Structural Testing.
It's painless to use and maintain.
We've integrated Jest's snapshot testing directly into Storybook using an addon called [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots).
Now we can simply use existing stories as the input for snapshot testing.
## What's Snapshot Testing?
With Snapshot testing, we keep a file copy of the structure of UI components. Think of it like a set of HTML sources.
With Snapshot testing, we keep a file copy of the structure of UI components.
Think of it like a set of HTML sources.
Then, after we've completed any UI changes, we compare new snapshots with the snapshots that we kept in the file.
@ -20,7 +24,8 @@ If things are not the same, we can do two things:
## Using StoryShots
[StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) is our integration between Storybook and Jest Snapshot Testing. It's pretty simple to use.
[StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) is our integration between Storybook and Jest Snapshot Testing.
It's pretty simple to use.
First, make sure you are inside a Storybook-enabled repo (make sure it has few stories).
Then, install StoryShots into your app with:
@ -55,4 +60,5 @@ After you complete any changes, you can run the above NPM script again and fin
* * *
StoryShots also comes with a few important [productive features](https://github.com/storybooks/storybook/tree/master/addons/storyshots#key-features) that can be customized. Have a look at the StoryShots [repo](https://github.com/storybooks/storybook/tree/master/addons/storyshots) for more information.
StoryShots also comes with a few important [productive features](https://github.com/storybooks/storybook/tree/master/addons/storyshots#key-features) that can be customized.
Have a look at the StoryShots [repo](https://github.com/storybooks/storybook/tree/master/addons/storyshots) for more information.