A first look at Storybook

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

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

A first look at Storybook

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Why is Storybook so great?

Do we always need it?

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Why is Storybook so great?

Do we always need it?

Thank you for reading, and let's connect!