Español

Testing Library/react May 2026

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event In your test setup file:

Here’s a concise write-up on , covering what it is, why it’s used, and a practical example. Testing Library / React: Write-Up What Is It? Testing Library is a family of testing utilities that encourage testing React components the way a user would interact with them. The specific package @testing-library/react integrates with Jest and other test runners to query and interact with the DOM. Core philosophy: “The more your tests resemble the way your software is used, the more confidence they can give you.” Why Use It Over Alternatives (like Enzyme)? | Feature | Testing Library | Enzyme | |---------|----------------|--------| | Query by role/text/label | ✅ First-class | ⚠️ Possible but not encouraged | | Access to component internals (state, props) | ❌ Explicitly avoided | ✅ Easy | | Tests simulate real user behavior | ✅ High | ⚠️ Lower | | Maintenance with refactoring | Low | High (if testing internals) | testing library/react

const button = screen.getByRole('button', name: /off/i ); await user.click(button); name: /off/i )

Greeting.test.jsx

import render, screen from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ToggleButton from './ToggleButton'; test('toggles text on click', async () => const user = userEvent.setup(); render(<ToggleButton />); Greeting.test.jsx import render

import render, screen, waitFor from '@testing-library/react'; import UserProfile from './UserProfile'; test('loads user data', async () => render(<UserProfile userId=1 />);


npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event In your test setup file:

Here’s a concise write-up on , covering what it is, why it’s used, and a practical example. Testing Library / React: Write-Up What Is It? Testing Library is a family of testing utilities that encourage testing React components the way a user would interact with them. The specific package @testing-library/react integrates with Jest and other test runners to query and interact with the DOM. Core philosophy: “The more your tests resemble the way your software is used, the more confidence they can give you.” Why Use It Over Alternatives (like Enzyme)? | Feature | Testing Library | Enzyme | |---------|----------------|--------| | Query by role/text/label | ✅ First-class | ⚠️ Possible but not encouraged | | Access to component internals (state, props) | ❌ Explicitly avoided | ✅ Easy | | Tests simulate real user behavior | ✅ High | ⚠️ Lower | | Maintenance with refactoring | Low | High (if testing internals) |

const button = screen.getByRole('button', name: /off/i ); await user.click(button);

Greeting.test.jsx

import render, screen from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ToggleButton from './ToggleButton'; test('toggles text on click', async () => const user = userEvent.setup(); render(<ToggleButton />);

import render, screen, waitFor from '@testing-library/react'; import UserProfile from './UserProfile'; test('loads user data', async () => render(<UserProfile userId=1 />);