2020 Complete Setup for Storybook, Nextjs, Typescript, SCSS and Jest
Tags: tutorial, typescript, webdev, beginners
Published: 2020-08-18 01:12:59

In this article, I will guide you step by step to set up Storybook with Next, Typescript, SCSS, and Jest.

Storybook is an open-source tool for developing UI components in isolation. It makes building stunning UIs organized and efficient. However, it can be quite tricky to set up with Nextjs.

# Requirements

* Node.js 10.13 or later
* MacOS, Windows (including WSL), and Linux are supported

# Create Nextjs App

Create a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run this command:

```
$ npx create-next-app
✔ What is your project named? … my-app
✔ Pick a template › Default starter app
```

* Enter your project name + hit return
* You will be asked to choose a template: Use arrow key ⬇ to choose a `Default starter app` and hit return

After the installation is complete, to start the development server:

```
cd my-app
yarn run dev
```

You should see this page on localhost:3000
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d16it50kz4mbrdtjlxi0.png)

# TypeScript

Next, let’s configure Typescript for our Next app

```
$ yarn add -D typescript @types/react @types/node
```

Create a `tsconfig.json` in the root folder — this is where you will put your typescript configurations.

```
/* root folder */
$ touch tsconfig.json
```

And add the following config to the file:

{% gist https://gist.github.com/trinwin/20e9e0c55b76d5b299567fd9a1b76f6e %}

Remove `index.js` and create `index.tsx` file. You can do it manually or use these commands in the root folder

```
/* root folder */
rm -f pages/index.js
touch pages/index.tsx
```

Add the following to `index.tsx`:

{% gist https://gist.github.com/trinwin/5b21e59373cfd684150a04c4d59b71b8 %}

Restart your server and check out your `http://localhost:3000/` by running:

```
$ yarn run dev
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/savd3hqjrnphqryhecnx.png)

# Storybook

Next, we’ll configure Nextjs, SCSS, and Typescript for Storybook

```
$ yarn add -D @storybook/react @storybook/preset-typescript
```

Create `.storybook` folder and storybook config files:

```
/* root folder */
mkdir .storybook
cd .storybook
touch .storybook/main.js .storybook/next-preset.js .storybook/preview.js
```

Now we will go over how to configure these files.

## next-preset.js

In this file, we will configure Typescript and SCSS to work with Storybook

```
$ yarn add -D sass style-loader css-loader sass-loader @babel/core babel-loader babel-preset-react-app
```

Add the following configuration to `next-preset.js`

{% gist https://gist.github.com/trinwin/a1ab37f534658aa893c287dabd773f04 %}

## SCSS

Create your style folder in the root and add global scss file.

```
/* root folder */
mkdir styles
touch styles/global.scss
```

{% gist https://gist.github.com/trinwin/14ac2c229d22dfcbd935ee90588a3c8c %}

## preview.js

In this file, we configure the “preview” iframe that renders your components. We will import your global scss file here.

{% gist https://gist.github.com/trinwin/6e06de4f1e2a4fe61625b2b4b6963eae %}

## main.js

main.js is the most important config file. This is where we place the main configuration of Storybook.

{% gist https://gist.github.com/trinwin/fe8d4469d777add2089f8958bc77dcc3 %}

## Create a story

Let’s create a simple Button component and a story to test our Storybook setup. First, create a components folder and 2 files `Button.tsx` and `Button.stories.tsx` in the folder.

```
/* root folder*/
mkdir components
touch components/Button.tsx components/Button.stories.tsx
```

Then, add the following contents into 2 files:

{% gist https://gist.github.com/trinwin/772a7efaa4bca853c97cb62a57b4ce91 %}

{% gist https://gist.github.com/trinwin/16ef98d953faa78980d6107431ba19f4 %}

Finally, add npm script to `package.json` to start storybook.

```
{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}
```

Now, let’s run our Storybook.

```
$ yarn storybook
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3mh1s0at8pdu1wiv5smk.png)


You should see our global scss style took affect and 2 stories that we have created earlier to test the Button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2jm1deca9qk4hs7una4s.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19rtxjqz2si740qgcjag.png)


# Jest

Next, we will add `unit tests` and `snapshot tests` in Jest for testing components in Nextjs and Typescript.

First, let’s install these development dependencies for Jest.

```
$ yarn add -D jest @types/jest ts-jest babel-jest @types/enzyme enzyme enzyme-adapter-react-16
```

We’ll need to configure Enzyme to use the adapter, which we can do in Jest’s bootstrap file. Let’s create a config folder and place the setup file in there.

```
/* root folder */
mkdir config
touch config/setup.js
```

{% gist https://gist.github.com/trinwin/079c553f4f21c797876e6a9386954377 %}

This code will run also before each test but after the testing framework gets executed:

Now let’s create a config file for jest. If you place your setup file above at a different location then make sure to change your `setupFiles: […]` in `jest.config.js`.

```
/* root folder */
$ touch jest.config.js
```

{% gist https://gist.github.com/trinwin/2b36d1b538e3191ef459f63e93b7396f %}

## Config babel.config.json

Lastly, we will add babel configurations. Let’s add these dev dependencies to our package.json by running the following command:

```
yarn add -D @babel/preset-env @babel/preset-react @babel/preset-flow @babel/plugin-transform-runtime babel-plugin-transform-es2015-modules-commonjs
```

In the root folder, create a babel config file. For some reasons, babel.rc does not work and I have to replace it with `babel.config.json`

```
/* root folder */
$ touch babel.config.json
```

{% gist https://gist.github.com/trinwin/0bbc1def630a40d352ef734fbb940d62 %}

## Let’s create a test

Now, let’s run a simple unit test to test the index file that we created earlier to make sure that it has the welcome message “Welcome to My Next App!” as a “h1” element.

First, create a `__test__` folder to keep our test files in one place and create `index.test.tsx` file.

```
/* root folder */
mkdir components/__test__
touch components/__test__/index.test.tsx
```

{% gist https://gist.github.com/trinwin/24e85532800b3c533a770dbda3dd8e3a %}

## Snapshot testing

Finally, I will show you how to create a simple snapshot test. We use Snapshot testing to keep a copy of the structure of the UI component or a snapshot so when after we make any changes we can review the changes and update the snapshots. You can read more about Snapshot testing here.

To start, let’s install react-test-renderer, a library that enables you to render React components as JavaScript objects without the need for a DOM.

```
$ yarn add -D react-test-renderer
```

Now, create a file called `Button.snapshot.test.tsx` to test create new snapshots for the Button component.

```
$ touch components/__test__/Button.snapshot.test.tsx
```

{% gist https://gist.github.com/trinwin/fbd19f328eccea888f7ba119231f1f6f %}

Now, add the add npm script to `package.json` to run your tests

```
{
  ...
  "scripts": {
    ...
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}
```

Go ahead and run your tests.

```
$ yarn run test
```

You should see 1 unit test and 1 snapshot test are passed

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eix824pazd836e9u7v7a.png)

If you run into errors such as “`The default export is not a React Component in page: ‘/’`” or “`ReferenceError: regeneratorRuntime is not defined`”, try to delete `package-lock.json`, `node_modules` folder, and `.next` folder and then restart your server, storybook and rerun your test again.

# Conclusion
Thank you for reading 🙏🏻 and let me know in the comment if you run into any problems and if it's helpful for you.

You can also clone the source code here to get started on your development right away: [https://github.com/trinwin/storybook-next-ts-template](https://github.com/trinwin/storybook-next-ts-template)

> Connect with me on [Medium](https://medium.com/@trinwin), [LinkedIn](https://www.linkedin.com/in/trinwin), [Github](https://github.com/trinwin), and [Twitter](https://twitter.com/_trinwin) 🤓.