Hondo

Using Storybook for React component development and testing

With a new React app, it’s time to think about building components. Components are the core of any React application. Developing them within a React app can be time consuming. Testing them within the app can also be difficult if the app changes.

This is where Storybook can help. Storybook is an environment that allows developers to craft components on their own.

To get started with Storybook, start by installing it globally with this command in a shell:

npm i -g @storybook/cli

Second, in the shell, go to the directory of the React app. Run this command:

getstorybook

The getstorybook command sets up the project for Storybook and installs dependencies. Once setup, it’s possible to fire up Storybook with this command:

npm run storybook

At this point, Storybook is running and components it’s possible to add components.

Start by creating a new directory in project called components. Create a new component in this directory called Payments. The filename should be Payments.js

Paste this code as the component:

import React, { Component } from 'react';
import {calculatePayment, calculateTotalCost, calculateInterestCost} from '../lib/math';

let NumberFormat = require('react-number-format');

class Payment extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={'p'}>
        <h3>Monthly Payment</h3>
        <p className={'p-a'}><NumberFormat value={800} displayType={'text'} thousandSeparator={true} prefix={'$'} /></p>
        <p className={'p-m'}>Over the life of this loan, you will pay <NumberFormat value={75000} decimalPrecision={2} displayType={'text'} thousandSeparator={true} prefix={'$'} />. This loan will cost you <NumberFormat value={3500} decimalPrecision={2} displayType={'text'} thousandSeparator={true} prefix={'$'} /> in interest.</p>
        <style jsx>{`
          .p {
            background-color: #343434;
            color: #ffffff;
            padding: 2rem;
            text-align: center;
          }

          h3 {
            margin: 0 0 1rem;
          }

          .p-a {
            font-size: 300%;
            margin: 0 0 1rem;
            font-weight: 700;
          }

          .p-m {
            margin: 0;
          }
        `}</style>
      </div>
    )
  }
}

export default Payment;

Now that a basic component exists, it can get added to Storybook. Open the stories/index.js file. By default, some basic Storybook stories exist. They look like this:

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

Add the Payment component to the imports section of the stories with this line:

import Payment from '../components/Payment'

With the component added, the story is ready to get setup. Add this bit to the story file:

storiesOf('Payment', module)
  .add('default', () => <Payment></Payment>)

In the Storybook browser, the component should now display. As it gets edited, the component should update live in the browser.

With Storybook setup, testing is easier. The Storybook community also has a lot of add ons to increase the number of things that Storybook can do.

There was an error submitting your subscription. Please try again.
Get my latest posts and links about development and moonlighting delivered every Sunday at 8pm.