Why does this skill prioritize getByRole queries?

Prioritizing getByRole ensures that your tests verify accessibility and interact with your components the same way a real user or screen reader would.

Does this skill support both Vitest and Jest?

Yes, the skill provides patterns and configurations that are compatible with both Jest and Vitest for React component testing.

Can this skill help identify testing anti-patterns?

Yes, it is designed to proactively avoid common mistakes like testing internal component state, using querySelector, or unnecessary manual act() calls.

How does the skill handle asynchronous component updates?

It implements best practices using findBy queries and the waitFor utility to reliably test elements that appear after data fetching or state changes.

TypeScript Component Testing

Name: TypeScript Component Testing
Author: Agentient

byAgentient

보안 및 테스팅

Implements industry-standard Jest, Vitest, and React Testing Library patterns to ensure robust, accessible frontend components.

소개

This skill equips Claude with specialized knowledge for writing professional-grade React component tests that focus on user behavior rather than implementation details. By leveraging React Testing Library's accessibility-first philosophy, the skill helps developers implement high-quality test suites using getByRole queries and realistic user interactions via user-event. It provides standardized patterns for both Jest and Vitest environments, including advanced handling for asynchronous updates, data fetching, and the prevention of common testing anti-patterns like manual act() wrapping or brittle DOM selectors.

주요 기능

0 GitHub stars
Realistic user interaction simulation with the user-event library
Dual compatibility with Jest and Vitest testing frameworks
Accessibility-first query prioritization using getByRole and label-based selectors
Advanced asynchronous testing patterns using findBy and waitFor utilities
Anti-pattern detection to prevent testing implementation details

사용 사례

Writing comprehensive unit tests for new React components from scratch
Refactoring legacy tests to follow modern Testing Library best practices
Debugging complex asynchronous state updates and data-fetching tests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit typescript-component-testing

For use in Claude.ai and ChatGPT

Download Skill

GitHub

소개