Test React Components In Isolation

So I found this cool library the other day - Storybook.js. It allows you to isolate your UI components and see how they look in certain cases (testing visually). I was so hooked up on the idea of adding it to my projects that I spent two days trying to make it work with React + TypeScript (created with Create React App) 😄 Oh boy this was a journey! So to help others I am writing this short guide that may save somebody hours.


Step-by-Step Guide

Run those commands in folder where you will have your project (first two commands will bring your tools up to date, I had very old npm and CRA 2, which gave me problems):

# Update to latest npm (6.11.3 for this post)
sudo npm install -g npm
# Update to latest CRA (3.1.2 for this post)
sudo npm install -g create-react-app

create-react-app . --typescript
npm install --save-dev @storybook/react @types/storybook__react
mkdir .storybook

Add line to "scripts" in package.json:

"scripts": {
    "storybook": "start-storybook -c .storybook -p 9090"
}

Create file .storybook/config.ts:

import { configure } from '@storybook/react';
configure(require.context('../src', true, /\.stories\.tsx$/), module);

Create file ./storybook/webpack.config.js:

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Create first story src/App.stories.tsx:

import * as React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('Button', module)
  .add('with text', () => <button>Hello Button</button>)
  .add('with some emoji', () => {
    return (
      <button>
        <span role="img" aria-label="so cool">
          😀 😎 👍 💯
        </span>
      </button>
    );
  });

Run npm run storybook and "Voila!" it should work out of the box.

Happy Experimenting!


What went wrong with my setups

  • My npm and create-react-app versions were old
  • I was following guide (Storybook.js React Guide) not for TypeScript at first
  • Google TypeScript Style introduced errors by overwriting my tsconfig.json
  • Building problems (Babel-related, missing packages, etc.)
  • npm start not working because webpack dependency should not be in CRA project (but it solved problems with Storybook.js building though)

I am glad it is finally over and can be set up in such a short time!

My plans with Storybook.js

Planning to integrate it into my projects for UI components testing and playing around without messing up frontend part :)

comments powered by Disqus