How to improve your UI frontend testing. Test components with Storybook!

Storybook stories are an efficient and simple way of testing UI components! We start with an abstract analogy to understand "why", then do a live demo, and then discuss options for testing, both manual and automated.

We used the React framework (but any other framework like Vue, Angular, or Svelte will work as well) to look at a default example of "stories" and add some more to highlight the power of such a test approach.
Each story serves as a test and we look into answering the "when do I stop testing?" question (spoiler: based on risk ;) ).

What are the testing options? There are plenty!
Manual clicking. This is the most unreliable one.
For automated testing we can use test-runner (Jest + Playwright under the hood) for the "can my component render?" tests.
Chromatic for "how does my component looks?" tests.
And any UI test framework of your choice (like Cypress, Selenium, or any other) as a last resort option.

-----------------------------------------------------------------------------------------------
----------- Timeline --------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
0:00 - intro
0:28 - real-life analogy
1:58 - storybook installation
2:46 - demo
3:21 - how many do I need?
5:45 - testing options
6:10 - using test-runner
6:46 - chromatic demo
7:30 - UI test framework
8:00 - summary

[subhanihsan]

thanks man, these videos are really good