Using Storybook stories with Testing Library

Did you know that you can import your stories from Storybook and run them as tests? I recently learned about this cool idea and I'm going to show some examples I've put together that showcase some of the benefits of doing so. I'll be using React, Jest, and Testing Library for these examples, but many of the concepts will apply to other frameworks and setups as well.

~~~~~~

Resources for tools used in this video:

🃏 Jest Basics video
   • JavaScript Testing Basics with Jest  

⚛ React Docs
https://reactjs.org/docs/getting-star...

📕 Storybook install documentation
https://storybook.js.org/docs/react/g...

🐙Testing Library Docs
https://testing-library.com/docs/

🐙Testing Library Course from the creator
https://testingjavascript.com/

~~~~~~

Timestamps:

00:00 - Introduction
00:26 - Quick project overview
03:18 - The first test
06:11 - Using a story as a test
08:43 - Getting proper coverage reports
13:21 - Using a second story for a test
14:28 - Raising coverage with a new story and test
20:52 - Testing a Carousel
32:06 - A note on keeping test and story data in sync
33:58 - Wrap-up

~~~~~~

Repository on Github for the code used in the video:
https://github.com/Jimmydalecleveland...

David Khourshid's codesandbox Carousel example:
https://codesandbox.io/s/funny-wind-p...

~~~~~~

Follow Jimmy Cleveland's doings:
twitter:   / jimmydcleveland  
blog: https://blog.jimmydc.com/

~~~~~~

#storybook #jest #testinglibrary