DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for A first look at Storybook
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

A first look at Storybook

So you might have heard about Storybook, not children's stories, but the one for developers.

It's a frontend system (a workshop, they call it) for building UI components and pages.
This allows you to create more stable components and test and document them.

Why is Storybook so great?

Storybook provides a way for developers to create components and pages in isolation. This means you can focus on how that individual element should behave, its options, and so on.

Eventually, you write your story for the component and define the different states it can be in.

After this, we get a couple of cool features:

  • Spot test: Run your Storybook, and you'll be able to view the component and see if it is showing as expected.
  • Visual tests: Automated tests to see if your component still renders as the previous test
  • Interaction test: Test how it behaves on user interaction
  • Accessibility test: Super cool to see there is an accessibility test on the component level!
  • Snapshot testing: You can test on component dom level against snapshots to ensure nothing changes by accident.

You'll be able to reuse the test in Storybook in other testing frameworks as well.

Besides these points, it also provides documentation for your team. Colleagues can find components easily and see what they should look like.

Do we always need it?

I'm super intrigued to give Storybook a try, as we use many custom components (like, really a lot!). This becomes a pain to maintain as some code someone else writes might accidentally impact a component.

I'm writing this series around Storybook to try it before implementing it.
I want to experience what it's like and if it can be helpful.

But, with that said, there will be times when it will be sheer overkill for your project.
For instance, when you rely solely on an external component library, you can use Storybook, but it will take longer to set up and doesn't really bring much value.

There is also another level of how long it will take to set up Storybook.
If your application is tiny, you may like to test it manually.
But in most cases, you'd be benefited from having some visual system in place.

I'm super hyped to try it and follow my newsletter if you are, too, as we will be exploring it in detail over the next couple of articles.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

Collapse
 
damian_cyrus profile image
Damian

Storybook is a great tool for component visualization and testing. You can additionally do almost everything with addons/extensions.

The only thing that stopped me from using it: pnpm. It is so hard to make storybook run with it when you want to do more than the basic things. Maybe they updated their package dependencies again for the better, or addons were better maintained.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Oh! That's a interesting point, haven't seen it come up yet.
Maybe they fixed it in the new 7 beta? (I've seen a lot of bugs are fixed in that, and they basically changed the whole internals it seems).

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!