react-testing-library
Lightweight React testing library for writing maintainable, user-focused tests
About react-testing-library
React Testing Library provides simple utilities to test React components by focusing on how users interact with your application. It encourages accessible testing practices and helps ensure your tests remain reliable even as your components evolve.
FAQ
You can test input onChange handlers using the fireEvent.change method. Pass the value as part of the change method call. For example, fireEvent.change(input, {target: {value: 'a'}}).
To test if an error boundary successfully catches an error, ensure that the fallback of the boundary is displayed when a child throws. For example, expect(container.textContent).toEqual('Something went wrong.').
Yes, you can write unit and integration tests with React Testing Library. However, it intentionally does not support shallow rendering. You can mock dependencies to unit test high-level components.
If a component throws during render, you can wrap it in a try-catch or use dedicated matchers if your test runner supports these. For example, in Jest, you can use expect(() => render( )).toThrow('I throw').
You can use Jest's mocking feature to mock out components. For example, jest.mock('react-transition-group', () => { ... }). This is useful for animation libraries or other complex components.
Snapshot diffing may not work out of the box because React Testing Library uses the DOM, which is mutable. To fix this, clone the DOM when passing it into snapshot-diff. For example, const firstVersion = container.cloneNode(true).
This warning is usually caused by an async operation causing an update after the test has already finished. You can resolve it by waiting for the result of the operation in your test using utilities like waitFor or a find* query.
It is often preferable to test high enough up the component tree to simulate realistic user interactions. Testing every component individually can cause issues, so focus on testing how users interact with your application.
Alternatives to consider
Community ratings & full list
Badges
Promote react-testing-library giving it more exposure, by adding these badges to your website, documentation, or product listing. Each badge links back to react-testing-library page on Webfolio.
<a href="https://www.webfolio.to/tools/react-testing-library?utm_source=badge&utm_campaign=badge" target="_blank" rel="noopener noreferrer"><img src="https://www.webfolio.to/badges/featured_color.svg" alt="Featured on Webfolio" style="max-width: 150px" /></a>
Categories
Claim this tool
Are you the founder? Claim your profile to update details and track views.