Use Storybook For React App

What is Storybook

Storybook is a tool to make UI better and better. Storybook is used to make the UI development faster without any struggle. It isolates the UI components. The Storybook provides the facilities to develop one UI component at a time. You can start development without your all UI setups. In this article, we will learn about the Storybook and also will learn How to use Storybook with React.

Storybook is used to divide and develop UI components for your complex pages. Storybook provides the facilities to document your UI components so that the reusability be easier. The Storybook provides the testing features to test your components to prevents the bugs from your UI Components.

You can use Storybook with the most popular JavaScript UI Frameworks like AngularJS, ReactJS, etc. By using Storybook, we create a story. A Story contains the rendered state of UI components. You can write as many stories as you want per component, that provides all the essentials states of the components.

Let's see How we can use Storybook with react app from scratch:

Create a React App:

To move ahead, let's create a react app. In this demo app, we'll integrate our Storybook and will create a demo component. To create a demo react app, run the below command:

npx create-react-app story-book-demo

cd story-book-demo

npm install

How to use Storybook to write Test Case for React Component?

How to use Storybook to write Test Case for React Component?

Now run

yarn start

and open URL in browser

How to use Storybook to write Test Case for React Component?

Now, our demo React app is running. Let's see how we can use Storybook.

Setup Storybook:

In this step, we need to create a folder name .storybook on root location.
Then create a file main.js and write the below codes inside the main.js:
Now, create a file name preview.js inside the .storybook folder.

How to use Storybook to write Test Case for React Component?

Setup your Component:

Now, we'll write our components for our React app.
To do this, create a folder name components inside src folder. Now create a file name Button.component.js inside the components folder.
Now write the below codes inside the file Button.component.js:
Button.component.js ( src->components->button->Button.component.js ):

                    import React from 'react';
                     
                    export const Button = ({children, onClick})=>(
                       <button onClick={onClick}> {children}
                       </button>
                    )
                    

Till now, we have created a component name Button. Now its time to create the stories for this component, to test the component.

Create Story for the component:

In this step, we'll create stories to test the Button component. To do this, create a file name Button.stories.js inside the folder button (src->components->button->Button.stories.js).
Inside the file "Button.stories.js", write the below codes:

                        import React from 'react';
                        import { action } from '@storybook/addon-actions';
                        import {Button} from './Button.component';
                        
                        export default { component: Button, title: 'Button' };
                         
                        export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
                         
                        export const emoji = () => (
                         <Button onClick={action('clicked')}>
                           <span role="img" aria-label="so cool">
                             😀 😎 👍 💯
                           </span>
                         </Button>
                        );
                             
                        export const Test = () => <Button onClick={action('clicked Test')}>Test Button</Button>;
                        

In the above stories, we have 3 different scenarios. You can say, we have 3 types of test for this Button component. The first scenario is for the default Button. The second scenario is to render the text. And the third scenario is to render the emojies as the label of the Button. We have written the code to handle the button click.
We can add many more scenarios into this Button component and test it with these given scenarios. The above code has 3 scenarios that we will test in the next step.

Add Script to start Storybook:

In this step, we need to add the below command to start the Storybook. To do this add below script in package.json file.

                            "scripts": {
                                ..
                                "storybook": "start-storybook"
                                ..
                            }
                        

Install the dev dependencies:

In this, we need to install the dev dependencies for the Storybook, to do this run the below command:

npm i --save-dev @babel/core @storybook/addon-actions @storybook/react babel-loader

How to use Storybook to write Test Case for React Component?

After the installation, our package.json will look like this:

                            {
                                "name": "story-book-demo",
                                "version": "0.1.0",
                                "private": true,
                                "dependencies": {
                                  "@testing-library/jest-dom": "^5.11.4",
                                  "@testing-library/react": "^11.1.0",
                                  "@testing-library/user-event": "^12.1.10",
                                  "react": "^17.0.2",
                                  "react-dom": "^17.0.2",
                                  "react-scripts": "4.0.3",
                                  "web-vitals": "^1.0.1"
                                },
                                "scripts": {
                                  "start": "react-scripts start",
                                  "build": "react-scripts build",
                                  "test": "react-scripts test",
                                  "eject": "react-scripts eject",
                                  "storybook": "start-storybook"
                                },
                                "eslintConfig": {
                                  "extends": [
                                    "react-app",
                                    "react-app/jest"
                                  ]
                                },
                                "browserslist": {
                                  "production": [
                                    ">0.2%",
                                    "not dead",
                                    "not op_mini all"
                                  ],
                                  "development": [
                                    "last 1 chrome version",
                                    "last 1 firefox version",
                                    "last 1 safari version"
                                  ]
                                },
                                "devDependencies": {
                                  "@babel/core": "^7.13.14",
                                  "@storybook/addon-actions": "^6.1.21",
                                  "@storybook/react": "^6.1.21",
                                  "babel-loader": "^8.2.2"
                                }
                              }
                              
                    
                        

Run the Stroybook:

We have created a React demo app, we have done with the Storybook setup, we have created our component, we have created story for our component then we have added our script to start our Storybook, Now it's time to run the storybook.
To start the Storybook, run the below command.

npm run storybook

How to use Storybook to write Test Case for React Component?

As you see, in the above snapshot, you need to opne the URL http://localhost:{PORT_FROM_ABOVE_SCREEN}/?path=/story/button--text and see the result.

How to use Storybook to write Test Case for React Component?

---

Conclusion:

In this article, We have created a React demo app, we have done with the Storybook setup, we have created our component, we have created the story for our component then we have added our script to start our Storybook, we have run the storybook with multiple scenarios.