skills.rest
Higashi-Kota
Higashi-KotaCOMMUNITY
Explore all skills by this author →
GitHub

testing

Run Vitest logic tests and Storybook UI interaction tests for React/TypeScript components.

Updated Jan 2, 2026
Search Tags:#unit tests#testing#Playwright#Storybook#Vitest#UI tests
One-click install
npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill testing-higashi-kota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing
Source: https://github.com/Higashi-Kota/llm-mermaid-chat/tree/main/.claude/skills/testing
Command: npx skills add https://github.com/Higashi-Kota/llm-mermaid-chat --skill testing-higashi-kota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes and accelerates both unit testing and UI interaction testing by integrating Vitest for logic tests with Storybook play functions, ensuring clear role separation and reliable test coverage.

Core Features & Use Cases

  • Role separation: Use Vitest for unit tests of classes and utilities; use Storybook stories and play functions for UI interaction tests.
  • A11y and UI testing: Leverage Storybook affordances to verify component states, interactions, and accessibility hooks.
  • End-to-end readiness: Integrate with Playwright for broader end-to-end scenarios and CI pipelines.

Quick Start

Install dependencies with pnpm install, then run unit tests with pnpm test, launch Storybook with pnpm storybook, and (optionally) run browser-based tests with pnpm test:browser. Also, add a minimal test script in your project as a starting example.

Frequently Asked Questions about testing

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

FAQPage Schema
How do I separate UI interaction tests from unit tests in a React TypeScript project?▼

Test component accessibility and states by leveraging Storybook affordances, which verify component interactions and accessibility hooks through play functions designed for UI interaction testing alongside Vitest logic tests.

How do I set up UI and unit testing with Vitest and Storybook?▼

Yes, this testing skill requires Vitest and Storybook to be installed in your project beforehand, and optionally requires Playwright if you intend to run broader end-to-end browser-based test scenarios.

What is the best way to verify React component accessibility and interactions during testing?▼

You can verify component accessibility and interactions by leveraging Storybook affordances, which check component states and accessibility hooks through play functions designed specifically for UI interaction testing.

How to integrate end-to-end browser tests into a Vitest and Storybook CI pipeline?▼

Integrate Playwright into your pipeline to run broader end-to-end browser-based scenarios, executing via pnpm test:browser alongside Vitest unit tests and Storybook UI tests for comprehensive frontend coverage.

Do I need Vitest and Storybook installed before adding automated UI and logic tests?▼

Yes, Vitest and Storybook must be installed in your project beforehand, with Playwright as an optional dependency for end-to-end readiness, to properly execute the automated testing workflows.

Related Skills

Explore More Software Engineering Skills→
bryonjacobbryonjacob

building-with-nextjs

Automate Next.js 15+ App Router UI creation with Vitest and Playwright tests.

Community
Advanced
hakushunhakushun

refactor-react

Update React component tests and Storybook stories after refactors.

Community
Basic
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
AratKruglikAratKruglik
9

react-testing

Automate React component, hook, and network interaction testing with Vitest or Jest.

Community
Advanced