DEV Community

Cover image for Vue component TDD with Jest and Storybook

Vue component TDD with Jest and Storybook

Shadow Smith on January 14, 2020

In this article, I'm going to show you how to build a custom Vue button component in isolation using Test Driven Development (TDD). Just a heads u...
Collapse
 
mwiest profile image
mwiest

Seems like the storybook and the jest tests are two completely different things. Why is this article about both of them and gives the impression that they work together somehow. Or do they??

Collapse
 
heyshadowsmith profile image
Shadow Smith

Great question!

Originally, this article was called "Isolated Vue component TDD with Jest and Storybook", and I think it may have lost context when I removed the word "Isolated".

It is true that you can build components with TDD with just Jest and Vue Test Utils without Storybook, but I added it to this article as an introduction to building/documenting your components in an isolated environment as you move through the TDD process.

For instance, if you had a component that had a bunch of different states based on more props than just a simple button would have, it would be useful to go through a TDD round when updating a component and then update your Storybook stories to reflect everything you test for.

Collapse
 
sanwil9 profile image
Steven Sanders

Great quick intro to using storybook and jest!

Collapse
 
heyshadowsmith profile image
Shadow Smith

Thanks, my friend!