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

セキュリティとテスト

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.

主な機能

Automated Vitest and Playwright configuration for Storybook 9
Built-in WCAG 2.1 accessibility validation with axe-core integration
CI/CD integration templates for automated GitHub Actions workflows
Interaction test generation using play functions and Testing Library
Cross-browser visual regression testing setup and snapshots
0 GitHub stars

ユースケース

Setting up a new automated testing environment for an existing component library
Simulating complex user interactions and form submissions within Storybook stories
Adding WCAG-compliant accessibility validation to mission-critical UI components

概要

主な機能

Automated Vitest and Playwright configuration for Storybook 9
Built-in WCAG 2.1 accessibility validation with axe-core integration
CI/CD integration templates for automated GitHub Actions workflows
Interaction test generation using play functions and Testing Library
Cross-browser visual regression testing setup and snapshots
0 GitHub stars

ユースケース

Setting up a new automated testing environment for an existing component library
Simulating complex user interactions and form submissions within Storybook stories
Adding WCAG-compliant accessibility validation to mission-critical UI components