storybook-play-functions

What problem does it solve?

This Skill enables you to write automated interaction tests directly within your Storybook stories using play functions, verifying component behavior and simulating user actions. It automates the testing of UI interactions.

Core Features & Use Cases

• Simulate User Interactions: Use userEvent to mimic realistic user behavior like typing, clicking, and tabbing within your stories.
• Asynchronous Testing: Test complex async flows and state changes using waitFor and expect from Testing Library.
• Error State Validation: Verify how components handle invalid inputs and display error messages, ensuring robust user experiences.
• Use Case: For a login form component, use a play function to simulate a user typing an invalid email, then a valid email, and finally clicking submit. This automatically tests the form's validation, submission, and success/error states, ensuring it works as expected without manual clicks.

Quick Start

Use the storybook-play-functions skill to write a play function for a LoginForm story that types an email and password, then clicks the submit button.