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! ▬▬▬▬▬▬▬▬▬▬

Discord:   / discord  
Twitter:   / storybookjs  
Instagram:   / storybookjs  
GitHub: https://github.com/storybookjs/storybook

Follow ‪@chantastic‬ on:
twitter:   / chantastic  
youtube: ‪@chantastic‬

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

Storybook Interactions Addon: https://storybook.js.org/addons/@stor...
Storybook Test Runner Addon: https://storybook.js.org/addons/@stor...
Writing interaction tests documentation: https://storybook.js.org/docs/react/w...
Storybook 6.5 Announcement: https://storybook.js.org/blog/storybo...
Interaction testing with Storybook post: https://storybook.js.org/blog/interac...
Testing component interactions with Storybook: https://storybook.js.org/blog/test-co...
Automate accessibility tests with Storybook: https://storybook.js.org/blog/automat...
Thinking in React (classes): https://reactjs.org/docs/thinking-in-...
Thinking in React (hooks): https://beta.reactjs.org/learn/thinki...

Storybook at https://learnstorybook.com/
Storybook addons at https://storybook.js.org/addons
Component driven UI development at https://www.componentdriven.org/

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

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

Claim free Storybook hosting at https://www.chromatic.com/!