Component testing in Storybook with play functions

Component testing in Storybook let’s you describe stories with user interactions!.

In this video you’ll learn how to write component tests with play functions — Storybook’s way of describing stories thru user events and interactions.

With play functions you can describe UI — not only as a function of props and state — but as the result of clicks and key-presses.

Learn from chantastic to use the Interactions Addon, write play functions with testing-library, and assert states with Jest…

▬ Follow us! ▬▬▬▬▬▬▬▬▬▬

Follow @chantastic on:
- youtube: @chantastic

▬ Learn more ▬▬▬▬▬▬▬▬▬▬

▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.

[chromaticui]

Correction from an engineer on the team.
The assertion should have an extra set of parenthesis around the promise, before .length is called:
expect((await

[megaroeny]

Y'all are killing it with these new videos. I love that you are even showing what code to write, which is fantastic for beginners or a broader audience in general! Keep it up!

[andyvennells]

Love your videos. No fluff, engaging and straigh to the point

[Thisis_Sathish]

Great content a content-oriented video. Cool stuff with engaging way of teaching. you are making my day something insightful.

[thohangst]

I admire the zeal. Not everyone can muster it. But it does make the work a bit more enjoyable, much apreesh.

[aarsnowangel]

Hey, thanks for this great video. I am using Storybook with StencilJs - any chance you know when interactions will work with the shadowDom?

[alex_mir]

Hey, great video. I have a question about your example, because you have one component with action, but what do I have to do if my component opens different component for example button opens card? How to simulate this action in storybook?

[ManuelSalvatori]

Very nice I didn't know about this new feature, I am already on 6.5.x but I don't have the addon, most likely because I kept upgrading my first installation, which was probably around 4.x?

I have a question I use storyshot and I was wondering if the play function has some level of interoperability with storyshot, for example if storyshot was able to understand when one interaction was completed to take a snapshot before moving to the next interaction.

Thanks

[kristaabraham]

Hey, great video! Is it possible to reset components to their original state after the play functions run? Just thinking that since the interaction tests run when the component is loaded, they could end up focused, expanded, or even dismissed - which could be problematic if also using storybook for component documentation.

[SleppySnek]

I've been playing around with this and I like it so far. I think there's a lot of potential with this.
One of the things I was trying to do, was to make some chromatic snapshots consistent by mocking some javascript animations by using jest fake timers, but it looks like that is not possible yet. Could be something to consider adding!
Another thing that might be interesting, is to combine this with chromatic snapshots. E.g. take a snapshot before and after doing an action instead of having to make two stories for it.

[corneasp]

How can I set different loaders for play functions? Or better yet, update args as I go through a scenario in a play function? storybook 7 & csf3

[jeremytenjo]

Amazing!

Can we run tests in the terminal ?

[witchmorrow]

Hi there, please could you tell me - is Storybook testing envisaged as a replacement for React testing (eg React Testing Library), or do they have some differences? Thanks!

[alexmachin]

I'll eventually get to writing unit tests with Storybook. This looks really cool though 🙌 In the video you use Storybook jest package, I take it you can use vites testing framework if you use Vite?

[manuelasousa]

Hey, this seems very powerful however i have a question. Which types of bugs this finds and when? Ex. After class is changed etc

[bonarhyme]

Please what is the right way to test aws amplify and graphql?

[joseluisdevegaandres]

Can we use interactions with web components?

[jenniferchan]

Haven't taken advantage of these play functions yet. dayumm!

[VenugopalKathavate]

Can we use play() function to replace component unit tests?

[chun-lunlin]

why we want to write this unit test-ish interactions instead of writing a actual unit test? feels like we are using the storybook like a test platform not a simple component demonstrate platform. are we using the storybook the wrong way?