skills.rest
fefogarcia
fefogarciaCOMMUNITY
Explore all skills by this author →
GitHub

testing-library

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

1|Updated Feb 10, 2026
Search Tags:#vitest#testing#accessibility#react#jest#msw
One-click install
npx skills add https://github.com/fefogarcia/approved-skills --skill testing-library-fefogarcia
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
MolcajeteAIMolcajeteAI
2

component-testing

Create unit and integration tests for React components with Vitest and Testing Library in JSDOM environments.

Official
Intermediate
BerryKuipersBerryKuipers
7

validate-coverage-threshold

Validate JavaScript/TypeScript test coverage against configured thresholds from coverage reports.

Community
Intermediate
umbracoumbraco
26

umbraco-msw-testing

Mock Umbraco backoffice extension API requests with MSW v2.

Official
Intermediate
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced