testing-library
Installation
SKILL.md
Testing Library (React/DOM)
The guiding principle: "The more your tests resemble the way your software is used, the more confidence they can give you." It encourages testing behavior (what the user sees) rather than implementation details (state, props).
When to Use
- User-Centric Component Testing: Testing React, Vue, Angular, or Svelte components the way actual end users interact with them.
- Accessible Query Prioritization: Selecting elements by accessibility roles (
getByRole), labels, and text rather than implementation details. - Async DOM State Synchronization: Waiting for elements to appear or disappear using
findBy*queries. - Refactoring-Resilient Test Suites: Ensuring tests don't break when internal component implementation details change.
Quick Start
import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";