Features
- User-centric queries (by role, text, label)
- Framework-agnostic core with React, Vue, Angular adapters
- Encourages accessible markup through query design
- Built-in async utilities for dynamic content
Pros
- Tests resemble how users actually use your app
- Discourages testing implementation details
- Improves accessibility by design
Cons
- Strict query philosophy can feel limiting at first
- Finding the right query for complex UIs takes practice
- Not designed for visual or snapshot testing
Overview
Testing Library is a family of testing utilities that help you test UI components by focusing on user behavior rather than implementation details. Its guiding principle is: “The more your tests resemble the way your software is used, the more confidence they can give you.”
The library provides queries that mirror how users find elements on a page: by accessible role, visible text, form labels, and other user-facing attributes. This approach naturally encourages writing accessible markup, since elements that are easy to query with Testing Library are also easy to use with assistive technologies.
Testing Library has adapters for React, Vue, Angular, Svelte, and other frameworks, with React Testing Library being the most widely used. It is the recommended testing approach in the React documentation.
When to Use
Use Testing Library for component and integration testing in any frontend framework. It pairs with Vitest or Jest as the test runner. Choose it when you want tests that focus on user behavior and remain stable through refactors.
Getting Started
npm install --save-dev @testing-library/react @testing-library/jest-domimport { render, screen } from '@testing-library/react'
test('renders greeting', () => {
render(<App />)
expect(screen.getByRole('heading')).toHaveTextContent('Hello')
})