Can I run these tests in my CI/CD pipeline?

Yes, the skill provides specific configurations and GitHub Action templates for running Storybook tests, coverage reports, and visual snapshots in automated CI environments.

What are Storybook 'play functions'?

Play functions are small snippets of code that run after a story finishes rendering, allowing you to use Testing Library to simulate user interactions like clicks and keyboard events.

Does this skill support older versions of Storybook?

This skill is specifically optimized for Storybook 9 and its native testing integrations, though many of the interaction testing principles also apply to Storybook 7 and 8.

Which test runners are supported?

The skill natively supports Vitest (the Storybook 9 default runner) for fast execution and Playwright for real-browser visual regression and end-to-end testing.

How does it handle accessibility testing?

It guides you through configuring the axe-core integration to automatically validate components against WCAG 2.1 AA/AAA rules directly within your stories.

Storybook Testing Suite

Name: Storybook Testing Suite
Author: flight505

byflight505

0•

보안 및 테스팅

Configures comprehensive testing for Storybook 9 components, including interaction, accessibility, and visual regression workflows.

The Storybook Testing Suite skill empowers developers to implement a robust quality assurance layer within their Storybook 9 environment. It provides expert guidance on setting up modern component testing patterns, ranging from simple unit tests with Vitest to complex browser-based interaction tests using Playwright. By integrating accessibility checks with axe-core and visual regression snapshots, this skill ensures that UI components are not only functional but also compliant and visually consistent across various environments and CI/CD pipelines.

주요 기능

01Automated Vitest and Playwright configuration for Storybook 9

02Built-in WCAG 2.1 accessibility validation with axe-core integration

03CI/CD integration templates for automated GitHub Actions workflows

04Interaction test generation using play functions and Testing Library

05Cross-browser visual regression testing setup and snapshots

060 GitHub stars

사용 사례

01Setting up a new automated testing environment for an existing component library

02Simulating complex user interactions and form submissions within Storybook stories

03Adding WCAG-compliant accessibility validation to mission-critical UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant testing-suite

For use in Claude.ai and ChatGPT

Download Skill