Storybook is one of the best tools for building components separately from your app. It allows you to work on a component in isolation and mock out variations for each component. Storybook becomes an even more powerful and useful tool with the addition of their addons.
When starting any project, it’s important to consider accessibility, testing, and edge cases so you can deliver the best product possible. In this article, I’ll go over a few of my favorite addons for Vue Storybook to help you build quality components and improve your workflow.
Accessibility is a hot topic right now in web development and it’s critical to build accessibility into every project. The a11y addon should be one of the first things you install to your Storybook project. It’s built on the axe rules by Deque Systems.
Rather than analyzing accessibility issues page by page, you can see accessibility issues for each component with the a11y addon. This addon adds an accessibility tab that shows three other labels for violations, passes, and incomplete. Each rule will show more information on the issue and provide a link for how to fix the problem. Clicking on the “Highlight results” checkbox to the right of each violation will show you where this violation occurs in your component.
Using this addon in the early stages of development will help to make sure accessibility is not an afterthought in your development process. Since it can be time-consuming and costly to fix accessibility issues after the components are already built, it’s best to have a tool that will validate in real-time as you build. It’s also important to keep in mind that while automated testing is great at finding a majority of accessibility issues, it’s equally as important to manually accessibility test to make sure you’ve covered all possible issues.
One of the problems with continuously adding new code to your project is that it can introduce unwanted visual bugs. Visual regression testing is an important aspect of any project for making sure you catch visual bugs as new code is added in. One of the tools to help with this issue is Percy, a visual regression tool that lets you automate visual testing of your UI that also works with Storybook.
The setup for the Percy addon is a little more involved than the other addons mentioned in this article. You will need to create a free Percy account and then create a new organization and project. From there, you will be given a Percy token environment variable that is used for authentication. The free plan for Percy offers 5,000 screenshots a month and unlimited users. If 5,000 screenshots aren’t enough, you can upgrade to a professional or enterprise plan.
The Percy addon can be run as part of your CI to see changes for each component with every commit to your repository. After Percy has finished running, it will provide a URL where you can view uploaded snapshots for each component. Within the Percy dashboard, you can approve, request changes, or leave comments for each snapshot. The best part about Percy is that it generates snapshots for Chrome and Firefox on all of the various screen sizes. This means that it’s less likely a visual bug will go unnoticed for these browsers.
If you build out entire pages as part of your Storybook workflow, you can also use Percy to validate UI on those pages. Getting consistent feedback on each component and page will save you the time and money it takes to manually scour each page for unexpected UI changes in your app.
When developing components at the start, it’s not easy to know all of the edge cases for when that component will be used on the page. The Controls addon makes it easy to find these edge cases that may not come up until later—like realizing the design of a component breaks when a title becomes too long.
This addon lets you edit props inside of the Storybook UI in a separate tab named “Controls.” You can use Controls for dynamic text areas, booleans, numbers, colors, objects, and many more. Controls also give you the ability to add documentation to each control with a description and a default value. All of these features are why Controls is a must-use addon for starting a new Storybook project.
Using Controls can help with the QA and developer experience by enabling your team to quickly become familiar with how components work. Playing around with the controls and testing different scenarios can easily surface any unexpected behavior with your components. This kind of testing is extremely important to the development of your application and can be done by anyone on your team.
Unit testing is essential for any application to make sure your code is working as intended and to document any edge cases. If you’re working on a Vue application, you’ve most likely come across unit testing with Jest. Fortunately, there’s a Storybook addon for Jest to let you see testing output within your Storybook build for each component.
Within Storybook, the Jest addon will add a “Tests” tab that shows what tests pass, fail, or are pending. You can also decide to add the test results on a component-by-component basis.
Having the test results shown within Storybook is a nice way for developers to gain context about each component.
The most beneficial part of using this addon, similar to the Controls addon, is that even non-developers can get insight into how the app is working and can verify the business logic of the components just by looking at the unit tests. This type of information is not easily surfaced for everyone to view. On top of that, the continual test feedback you get during development from within Storybook is extremely useful.
When refactoring, you may end up with unintended structural changes to your components. If you’re already using Jest, then adding StoryShots is a fine pairing to improve your testing suite. The StoryShots Addon uses Jest Snapshot Testing to quickly verify any UI changes in your components.
When you run npm test, it will create a snapshot file that saves the rendered output from each of your components. This file should then be checked in with the rest of your code. When you make changes to your components and run your tests again, it will compare the new output with the previous snapshot file and fail for any components that were updated. From there, you can then decide to keep the changes or fix the changes in the component to make sure nothing breaks.
Using the StoryShots addon in your workflow gives you another free and fast form of UI testing. When there is a failure with a test, this addon makes it extremely easy to debug with the diffs shown in the command line. All in all, this addon is so simple to use and gives you an automated way to flag HTML changes within your components.
There are many more addons that you can use in your Vue Storybook project, but these five have proven to be invaluable to my process in starting to build components in Storybook. Thankfully, Storybook continuously updates support for each of their core addons, and many of them have full Vue support now. If those aren’t enough, you can even build your own addon if you need more functionality in your Storybook workflow.
In summary, building components with these Vue Storybook addons can immensely improve your development process and create a better-shared context with your team. Each one of these addons will guarantee you’re thoroughly testing your components and give you a constant feedback loop. Now it’s your turn to try these out and further experiment with other addons to create the best Storybook experience for you and your team! You can find the repo here.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.
It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.
Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.
Learn more →
