skills.rest
robotijn
robotijnCOMMUNITY
Explore all skills by this author →
GitHub

component-tester

Test UI components in real browsers across React, Vue, Svelte, Solid, and Blazor.

3|2|Updated Jan 23, 2026
Search Tags:#component testing#react testing library#accessibility checks#real-browser tests#UI state coverage#MSW mocking#semantic queries
One-click install
npx skills add https://github.com/robotijn/ctoc --skill component-tester-robotijn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-tester
Source: https://github.com/robotijn/ctoc/tree/main/skills/frontend/component-tester
Command: npx skills add https://github.com/robotijn/ctoc --skill component-tester-robotijn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of shipping UI components with hidden bugs, accessibility violations, and refactor-breakage by enforcing user-centric, real-browser testing practices that mirror actual user interactions, instead of relying on fragile implementation-detail coupling or jsdom's incomplete DOM emulation.

Core Features & Use Cases

  • Multi-framework component testing: Provides framework-specific best practices and code samples for React, Vue, Svelte, Solid, and Blazor component testing workflows.
  • Comprehensive state and accessibility coverage: Enforces testing of all four critical UI states (loading, error, empty, populated), keyboard navigation, and axe accessibility assertions for every interactive component.
  • Modern tooling integration: Guides use of Vitest browser mode, Storybook 9+ Vitest addon, MSW v2 for network-layer mocking, and userEvent v14+ for realistic interaction simulation, with CI-ready snippets for all major test runners.
  • Use Case: For a team building a design system with 50+ reusable components, this Skill ensures every component passes real-browser interaction tests, has zero accessibility violations, and handles edge cases like API failures before it is merged to main.

Quick Start

Request isolated, real-browser component tests for your project's UI components that cover user interactions, all UI states, and accessibility requirements using your team's existing test runner.

Frequently Asked Questions about component-tester

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

FAQPage Schema
How do I write component tests that catch real UI bugs instead of breaking on refactors?▼

To write component tests that catch real UI bugs, use user-centric interaction testing with semantic queries and real-browser execution. This approach avoids fragile implementation-detail coupling by simulating actual user behavior and asserting accessible outcomes.

Does Vitest browser mode work for testing loading and error states in React components?▼

Yes, Vitest browser mode works for testing React component states. It enforces real-browser test execution, allowing you to validate loading, error, empty, and populated states accurately without relying on incomplete jsdom DOM emulation.

What is the best way to test keyboard navigation and accessibility in Vue or Svelte components?▼

The best way to test keyboard navigation and accessibility in Vue or Svelte is using axe accessibility assertions alongside userEvent v14+. This simulates realistic keyboard interactions and enforces zero accessibility violations for interactive components.

Can I use MSW v2 for network mocking in isolated Solid or Blazor component tests?▼

Yes, you can use MSW v2 for network mocking in isolated Solid or Blazor component tests. It operates at the network layer, allowing you to simulate API failures and edge cases, ensuring your components handle all critical UI states before production.

Why should I avoid jsdom for layout-sensitive component testing?▼

You should avoid jsdom for layout-sensitive component testing because it provides incomplete DOM emulation. Real-browser test execution via Playwright or Vitest browser mode is required to accurately catch rendering bugs and validate true visual behavior.

Do I need Storybook 9+ to run isolated component tests with Vitest?▼

No, Storybook 9+ is not strictly required as you can use Vitest browser mode or Playwright directly. However, the Storybook 9+ Vitest addon integrates smoothly, providing CI-ready snippets and enhanced workflow for multi-framework component testing.

Related Skills

Explore More Software Engineering Skills→
theofernandezztheofernandezz

testing

Enforce Vitest and Testing Library patterns for frontend tests.

Community
Advanced
beratcelik1beratcelik1
1

tdd-workflow

Enforce test-first development with failing tests before implementation in JavaScript/TypeScript projects.

Community
Advanced
ForgePlanForgePlan
3

canvas-storybook-test

Automate Storybook story testing against design specifications with Vitest, axe-core, and Chromatic.

Official
Advanced
Camilo8902Camilo8902

e2e-test-builder

Generate Playwright or Cypress end-to-end tests for critical user flows.

Community
Advanced