An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
2020 Complete Setup for Storybook, Nextjs, Typescript, SCSS and Jest
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-appyarn run dev
You should see this page on localhost:3000
TypeScript
Next, lets 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.jstouch 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, well 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 .storybookcd .storybooktouch .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 stylestouch 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
Lets 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 componentstouch 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, lets 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, lets install these development dependencies for Jest.
$ yarn add -D jest @types/jest ts-jest babel-jest @types/enzyme enzyme enzyme-adapter-react-16
Well need to configure Enzyme to use the adapter, which we can do in Jests bootstrap file. Lets create a config folder and place the setup file in there.
/* root folder */mkdir configtouch config/setup.js
This code will run also before each test but after the testing framework gets executed:
Now lets 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. Lets 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
Lets create a test
Now, lets 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, lets 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
Original Link: https://dev.to/trinwin/2020-complete-setup-for-storybook-nextjs-typescript-scss-and-jest-4khm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To