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 appand 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
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:
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:
Restart your server and check out your http://localhost:3000/ by running:
$ yarn run dev
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
SCSS
Create your style folder in the root and add global scss file.
/* root folder */
mkdir styles
touch styles/global.scss
preview.js
In this file, we configure the “preview” iframe that renders your components. We will import your global scss file here.
main.js
main.js is the most important config file. This is where we place the main configuration of Storybook.
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:
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
You should see our global scss style took affect and 2 stories that we have created earlier to test the Button.
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
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
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
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
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
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
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
Top comments (10)
First of all thank you for the guide. Unfortunately enzyme doesn't have an adapter for React 17. Do you know any alternatives?
I'm getting
TypeError: Cannot read property 'child' of undefined
When executing this line:
const wrap = mount();
Hopefully they will publish an update github.com/enzymejs/enzyme/pull/2430
You can add "@wojtekmaj /enzyme-adapter-react-17" as your dev dependencies and replace it with "enzyme-adapter-react-16" in the config/setup.js file.
Awesome! This is perfect for a Lerna monorepo with multiple nextjs apps and a design system component library I’m working on. Running the dev environment while making multiple changes to components/pages or building new ones was just hammering my cpu running microbundle/next dev in parallel with lerna 😂
I was dreading having to hunt down the right storybook config! 🙏🙌
That was exactly how I felt when I started this project. I'm glad I was able to help 😇
Great tutorial! I've used it to setup my project with SCSS. However, I'm running into an issue.
I've added a Button component in Storybook and it's working fine, until I add a component-specific SCSS file. When running Storybook I get the following error:
ModuleParseError: Module parse failed: Unexpected token (7:0)The error points to the beginning bracket of the SCSS rule. Any ideas how to setup component specific SCSS files?
Thanks, this is what I'm looking for.
Thank you for reading!
Hi Trinity! Funny because I was just looking at storybook + nextjs (haven’t really tried them for real). Have u used it? are u enjoying it? :)
If you turn this into a nodejs script, I swear it will go straight to the moon🚀. Thank you for the guide.