testing-library

Name: testing-library
Availability: InStock
Author: fefogarcia

Test React components with Testing Library queries and user-event simulations.

1|Updated Feb 10, 2026

Search Tags:#vitest #testing #accessibility #react #jest #msw

Ready to run

npx skills add https://github.com/fefogarcia/approved-skills --skill testing-library-fefogarcia

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: testing-library
Source: https://github.com/fefogarcia/approved-skills/tree/main/skills/testing-library
Command: npx skills add https://github.com/fefogarcia/approved-skills --skill testing-library-fefogarcia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @testing-library/react, @testing-library/user-event, @testing-library/jest-dom, jsdom, msw, axe-core, and includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill streamlines the process of testing React components, ensuring they function correctly, simulate user interactions accurately, and are accessible.

Core Features & Use Cases

Accessible Querying: Prioritizes semantic HTML and ARIA roles for robust tests.
Realistic User Simulation: Uses user-event to mimic actual user interactions like typing and clicking.
API Mocking: Integrates with Mock Service Worker (MSW) to mock network requests.
Async Handling: Provides clear patterns for testing asynchronous operations.
Use Case: When developing a complex form in React, use this Skill to write tests that verify input validation, submission logic, and error handling, ensuring a smooth user experience.

Quick Start

Use the testing-library skill to test a React component by rendering it and querying for a button with the role 'submit'.

Frequently Asked Questions about testing-library

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

FAQPage Schema

How do I test React components with accessibility queries?▼

To test React components, use accessible query methods like getBy, findBy, and queryBy to select elements by semantic HTML and ARIA roles, ensuring your tests validate both functionality and accessibility robustly.

What's the best way to simulate realistic user interactions in React tests?▼

Simulating realistic user interactions requires the user-event library to mimic actual user behaviors like typing and clicking, moving beyond basic event dispatching to verify component responses accurately.

How do I handle asynchronous operations when testing React components?▼

Handle asynchronous operations in React component testing by using the findBy query method and waitFor helper, which allow tests to wait for elements to appear or API responses to resolve properly.

Can I mock network requests for React tests using MSW?▼

Yes, you can mock network requests using Mock Service Worker (MSW) to intercept API calls during React component testing, allowing you to simulate various server responses and error states reliably.

How do I verify accessibility compliance in my React component tests?▼

Verify accessibility compliance by integrating axe-core into your React testing workflow, which automatically scans rendered components for ARIA violations and semantic HTML issues during test execution.

Do I need Jest and Vitest to use Testing Library with React?▼

Testing Library works with both Jest and Vitest, requiring jsdom to simulate the DOM environment, allowing you to render React components and interact with them seamlessly across different test runners.