banner 728x90

Using Storybook with Nuxt

In Mobile Web Development 61 views
banner 728x90

 Storybook Nuxt

Nuxt.js has been very nice to use in production web apps and side projects. It is simple, fast and very similar to web standards when it comes to creating components, importing plug-ins, and so on. Equally exciting is the rise of Storybook. It has gained a lot of support over the past year due to its ease of use when creating component / pattern libraries and the ability to perform component-based snapshot tests separately.

Recently I wanted to start a new side project and use Storybook with Nuxt. I was delighted to see their documentation on the use of Storybook with Vue (although React, React Native and Angular are also supported), but when I got started, I noticed some bumps on the road. After dragging a nager and a few pull requests, I got everything to work! This is a repo of the end product and this is the story of my trip that night.


For those who are unfamiliar with Storybook (as I was a week ago) or Nuxt, I would like to share a bit about them. Nuxt is an objectively good framework for build applications. It is community-driven, easy to learn and plays well with existing projects that Node.js. There are a lot of great projects out there with Nuxt and a few major developers that I would recommend to follow for more information, Sarah Drasner, Evan You and Rachel Nabors. Storybook has grown rapidly over the past year to become an essential part of many teams testing a test suite and a great way to track component UI. The starting point is that after creating a component, you & # 39; story & # 39; makes. The story contains various states of a component that provides a visual representation. If you write multiple stories, you have your storybook.

Installing and setting

This was forward staright. I use vue-cli to create a new Nuxt project (especially the Express taste) and then Storybook's documentation on how to install their package with Vue. In their documentation they show an example of a configuration file for Storybook. It discussed the use of Vuex as a plug-in, but that is not required to get things going. If you want to start without the plug-ins for now, you can view the configuration file in the repo of my trip.

Storybook has built in add-ons that add a lot of value to the package. I was interested in working the Action and Storyshot add-ons. With actions, Storybook can display event handler data in a panel. It is especially useful if you want to see what data is passed when a button is triggered in a click or other type of event by interacting with the user interface. Storyshots create a snapshot of the component individually so that you can perform a comparative test on components when making updates to ensure that there are no unexpected changes to the user interface. If I'm honest, snapshot testing was a new term for me a week ago, but it's really proven to be useful. Under the bonnet Storyshots Jest uses to test. We come a bit at my setback with Storyshots and Jest. If you are interested, you will find a full list of add-ons on their website, both native and community created.


The only part that I struggled with when setting up this add-on was to have the package work correctly when I launched npm run storybook . This command starts the localhost server for the Storybook user interface. Initially I saw a story in the end, but no action panel, despite the installation of storybook / addon actions via NPM. Apparently, I missed an addons.js file from the .storybook folder. That file should look like this to import the add-ins that you want to use in the Storybook UI:

import & # 39; @ storybook / addon-actions / register & # 39;
import & # 39; @ storybook / addon-links / register & # 39;

After adding that file the panel appeared, but I still saw no actions appearing when I clicked the button in the story Button / template + methods. I found out by trial and error that changing @click in the button template would: handle-click would give the result that I expected. I think that's because we test the component in isolation, so the action panel looks at changes in data and listens to event handlers within that specific component. I have not yet confirmed this with the community, but I believe it is logical.

Stories: Round 1

Here our journey becomes rocky. To install the right packages, I had to deviate slightly from what is offered in the documents. Here is the complete assignment to use for all the right packages: npm install - save-dev @ storybook / addon-storyshots jest react-test-renderer jest-vue-preprocessor . I'm still not sure why react-test-renderer is needed. I believe it is a mistake, but I still confirm that. There were a few mistakes at the moment and I have submitted a number of problems. While I waited for those answers, instead of going to sleep as a good person, I decided to messy up Jest to do end-to-end tests.

Down the Rabbit Hole We Go

I had not used Jest before and wanted to dig a bit under the bonnet to see how it worked. I started by creating a test / unit directory for the specs directory and some configuration files. Looking around I found a repo from Brant Willis on GitHub that really helped to resolve how the file jest.config.js should look like when working with Nuxt. Turns out that this file would later also be used by Storyshots. (So ​​maybe this was not a completely off-topic decision!)

After selecting the configuration, I was able to pass tests! I did not do insane things for the tests. There are numerous online tutorials for making tests with Jest. I have made a simple test for each component, the standard layout in Nuxt and every page in Nuxt. When I tried to run the test on Footer.vue, I received an error message. Ultimately, this is due to Footer.vue has no script area in the file.

 Footer component error

Story pictures: round 2

After selecting Jest I still did not have an answer to the submitted problems. In the classical logic of 3am I decided to search again and I came across a buried file in the official repo of the storybook. This is the file needed to tell storyshots where the configuration file can be found, which framework to use with Storybook and some other border options. I configured it for Vue, but I still ran into errors. It was said that storybook / react could not be found, even though I suggested Vue as the framework. After using npm install - save-dev storybook / comment everything was fine. (Yes, very strange.) When I tried to run npm test it gave me an unexpected error error. Something that was not well documented was the need to have a .babelrc file. It appears that it did not transpose the code with Babel before the tests were carried out. I found this .babelrc file after seeing this problem in the jest-vue preprocessor package.

The next half hour from here was a haze. When I snapped it out, I really messed up the repo and decided to go back to a commit that I knew he was working on. My wife also woke up and told me that I tapped too hard and moved to my office. #truLove (Who thought this was a good idea?)

After some caffine, I realized that I had added a webpack.config.js file to .storybook that overwrites many settings in the Nuxt configuration file. I put humpty dumpty together again and knew that I was coming close. After performing npm-test and trying out a few different things I still got an error message stories are only meant for use with a storybook . Turns out that Storyshots are available from Storybook 3.4.0-alpha.5. To update to that version I had to set the version for storybook-vue, storybook / add-on action and storybook / addon storyshots. I have also discovered that @ storybook / addon is needed to make add-ons work. It looks like it's a newer way to make add-ons work in an upcoming update.

When I performed npm test again, I got the following:

({"Object .": Function (module, export, require, __ dirname, __ filename, global, jest) {

Thanks to the community at Storybook, I found out that there was a solution to this bug by adding the following to jest.conf.js

transformIgnorePatterns: [

And TA-DA !!! It works!

As the sun began to rise …

I was really happy that it worked. It turns out that my Jest tests made snapshots for my specifications and that Storyshots made snapshots of the stories. It also comes with coverage stats which was a nice Easter egg. Although I'm not sure why I only get 50% coverage on my Button.vue file. (Everyone knows why? Leave a comment!) On the way I found a great source for Jest specifications with Vue. I'm excited to dig in more with the specifications and play with a few extra add-ons for Storybook.

Because I felt invincible and extremely exhausted, I decided to close the laptop and rest. And then I heard it … the cry of my 2-year-old daughter, the whine of a moody 4-year-old boy and the loud barking of a puppy who had to go outside. Seriously … whose idea was this ?!

banner 728x90
    Resetting of file changes with git
    Resetting of file changes with git
    There are many different philosophies when it
    DDoS protection by Incapsula (sponsored)
    DDoS protection by Incapsula (sponsored)
    DDoS security is an incredibly important protection
    Long e-mail discussions: Be Gone !!
    Long e-mail discussions: Be Gone !!
    We've all been working on those long
    Changes to permissions for AWS Mobile Hub
    Changes to permissions for AWS Mobile Hub
    Until recently, when you first created an

    Leave a reply "Using Storybook with Nuxt"

    Must read×