How to use Storybook JS with React - a basic tutorial

Storybook is a fancy tool that allows you to test your React components on their own. This means you can see how your components behave without any interaction from anything else within your app. Storybook has lots of different features...but this is a basic tutorial and I won't be going into them! You can see a good example of how Storybook works here - it is how airbnb uses it to test its calendar/date components. Different components are listed on the left hand side and you can see them working in the window on the right.

This tutorial is best for developers who are familiar with React, if you've not used it yet, bookmark this and learn some React first!

How to install and use Storybook

1) Use npx create-react-app your_app_name to create your React app. Don't forget to cd into your app.

2) Reorganise your folders so you've got a components folder within src. I always like to clear out the React app too!

3) Install storybook with -npx -p @storybook/cli sb init --type react_scripts This will install a .storybook folder and in your src folder, a stories folder.

4) Now you can take a look at the storybook interface - run it with the command npm run storybook and it'll load up in your browser, usually on localhost:9009.

5) In your components folder, make a folder called 'Button' and make an index.js file for it. Paste in the following code to make a button component:

import React from "react";
import CSS from "./Button.module.css";

function Button({ text, color = "##FFFF00" }) {
  return (
    <button style={{ backgroundColor: color }} className={CSS.button}>
      {text}
    </button>
  );
}
//I have passed in props for text and color (with a default value)

export default Button;

6) Make a css file for your button and style it as you'd like. I've used css modules so name it Button.module.css
Feel free to copy and paste the following:

.button {
  border-radius: 25px;
  border: black solid 2px;
  font-size: 1em;
  padding: 10px;
  margin: 3px;
}

7) You will need to create a js file for each component you make. It's best to keep these files in your components folder. When storybook was installed you were given a ready-made story file for your button component. Move this from your stories folder in src into your button component folder. Remove the '1-' from the front of your file.

8) In Button.stories.js remove import { Button } from "@storybook/react/demo" and replace it with import Button from "../Button/index" to link to your Button component.

9) The code below is how I adapted/added to the button story. Each 'export const' is a different 'test' for the same button component. You can see they have been given different text, background colours, props etc. Each one is shown separately in storybook as you can see in the video below the code. If you find your tests aren't rendering as you would expect, then you will need to adapt your button component.

import React from "react";
import { action } from "@storybook/addon-actions";
import Button from "../Button/index";

//this imports your component and gives it a title to show in storybook
export default {
  title: "Button",
  component: Button
};

export const Text = () => (
  <Button onClick={action("clicked")} text="Hello Button" />
);

export const Emoji = () => (
  <Button
    onClick={action("clicked")}
    text={
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    }
  />
);

export const Login = () => <Button text="Login" color="lightgreen" />;

export const Logout = () => <Button text="Logout" color="lightgreen" />;

export const BlueButton = () => (
  <Button onClick={action("clicked")} text="HelloBlue" color="Lightblue" />
);

Try using storybook to really put your components to the test!