skills.rest
storybook-astro
storybook-astroOFFICIAL
Explore all skills by this author →
GitHub

test-generator

Generate Vitest-compatible TypeScript test files from Storybook Astro component stories.

54|2|Updated Feb 17, 2026
Search Tags:#vitest#testing#accessibility#test-generation#storybook#astro#compose-stories
One-click install
npx skills add https://github.com/storybook-astro/storybook-astro --skill test-generator-storybook-astro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-generator
Source: https://github.com/storybook-astro/storybook-astro/tree/main/.agents/skills/test-generator
Command: npx skills add https://github.com/storybook-astro/storybook-astro --skill test-generator-storybook-astro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing comprehensive, framework-diverse tests for Storybook and Astro components is time-consuming and error-prone; this skill automates creation of consistent, maintainable Vitest test suites so developers can validate rendering, interactions, and accessibility without hand-crafting each case.

Core Features & Use Cases

  • Generate Vitest test files from Storybook stories using composeStories and renderStory patterns to cover default and variant scenarios.
  • Cross-framework support for Astro components and delegated framework components (React, Vue, Svelte, Preact, Solid.js, Alpine.js), including interaction, props/slots, and integration tests.
  • Coverage and quality focus with accessibility-first queries, edge-case testing (empty/null props, long content), and guidance to reach 80%+ coverage.
  • Use case: When adding a new Button component, produce Default, Variant, Accessibility, and Interaction tests that assert rendering, ARIA roles, and click behavior.

Quick Start

Use the test-generator skill to produce Vitest-compatible test files for a component and its stories that use composeStories and renderStory patterns and include rendering, interaction, and accessibility assertions.

Frequently Asked Questions about test-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I auto-generate Vitest tests for Storybook Astro components?▼

Auto-generate Vitest tests for Storybook Astro components by applying portable stories patterns using composeStories and renderStory to produce TypeScript test files covering rendering, interactions, and accessibility.

Can I generate interaction and accessibility tests for framework components like React or Vue in Astro?▼

Yes, generate interaction and accessibility tests for framework components including React, Vue, Svelte, Preact, Solid.js, and Alpine.js by driving test cases from Storybook stories within your Astro project.

What is the best way to achieve 80% test coverage for Storybook stories using Vitest?▼

Achieve 80% test coverage for Storybook stories using Vitest by generating comprehensive test suites that include accessibility-first queries, edge-case testing for empty or null props, and DOM assertions for default and variant scenarios.

How does composeStories work when generating test files from Storybook stories?▼

The composeStories pattern works by mapping Storybook story exports into renderable component functions, allowing generated Vitest test files to handle props, slots, and async rendering while asserting DOM output and event handling.

Does test generation handle edge cases like empty props and async rendering for Astro components?▼

Yes, generated test cases handle edge cases including empty and null props, long content, and async rendering for Astro components, ensuring robust DOM assertions and event handling validation across all story variants.

Do I need Storybook stories configured before generating Vitest test files for my components?▼

Yes, you need existing Storybook stories configured for your Astro and framework components, as the generated Vitest test files rely on composeStories and renderStory patterns driven directly from those story definitions.

Related Skills

Explore More Software Engineering Skills→
soham2008xyzsoham2008xyz

writing-react-native-storybook-stories

Write React Native Storybook stories using CSF with Meta and StoryObj.

Community
Intermediate
libertininicklibertininick

test-quality

Assess test suites for quality and coverage across CI pipelines.

Community
Basic
dain-agencydain-agency

storybook-gotchas

Resolve common Storybook rendering, configuration, and compatibility issues.

Official
Basic
nimeshgurungnimeshgurung

senior-qa

Generate test suites and analyze code coverage for ReactJS and NodeJS applications.

Community
Advanced