Scribd
Upload
782 views

React Testing Library: Simple and Complete Cheat Sheet

React Testing Library is a simple and complete cheat sheet for testing React components. It provides various search variants like getBy, getAllBy, queryBy, and findBy to query the DOM after rendering a component. It also allows interacting with elements by simulating user events and waiting for elements to appear or be removed before assertions.

Uploaded by

yash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
782 views

React Testing Library: Simple and Complete Cheat Sheet

React Testing Library is a simple and complete cheat sheet for testing React components. It provides various search variants like getBy, getAllBy, queryBy, and findBy to query the DOM after rendering a component. It also allows interacting with elements by simulating user events and waiting for elements to appear or be removed before assertions.

Uploaded by

yash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

React Testing Library Simple and complete cheat sheet

github.com/test-library/react-testing-library

render a component search variants (result) wait for appearance


import { render } from '@testing-library/react' test('movie title appears', async () => {
getBy Element or Error render(<Movie />)
const result = render(<MyComponent />)
getAllBy Element[] or Error // the element isn't available yet, so wait for it:
const movieTitle = await screen.findByText(
/the lion king/i,
queryBy Element or null )

search the DOM queryAllBy Element[] or [] // the element is there but we want to wait for it
// to be removed
await waitForElementToBeRemoved(() =>
import { screen, render } from '@testing-library/react' findBy Promise<Element> or Promise<rejection> screen.getByLabelText(/loading/i),
)
render( findAllBy Promise<Element[]> or
<label> Promise<rejection> // we want to wait until an assertion passes
Remember Me <input type="checkbox" /> await waitFor(() =>
</label>, expect(mockFn).toHaveBeenCalledWith('some arg'),
) )
})
const checkboxInput = screen.getByRole('checkbox', {
name: /remember me/i,
}) search types (result)

Role <div role='dialog'>...</div>


render() options
interact with element LabelText <label for=“element” />
hydrate If true, will render with ReactDOM.hydrate

import userEvent from '@testing-library/user-event' PlaceholderText <input placeholder=“username” /> wrapper React component which wraps the passed ui

// userEvent simulates advanced browser interactions like Text <a href='/about'>About</a>


// clicks, type, uploads, tabbing etc
// Click on a button
DisplayValue <input value=”display value” />
userEvent.click(screen.getByRole('button'))
AltText <img alt=“movie poster” />
// Types HelloWorld in a text field
userEvent.type(screen.getByRole('textbox'), 'Hello World') Title <span title='Delete' /> or <title />

TestId <input data-testid='username-input' />

screen

debug(element) Pretty print the DOM text matches


...queries Functions to query the DOM render(<label>Remember Me <input type="checkbox" /></label>)

screen.getByRole('checkbox', {name: /remember me/i}) //


screen.getByRole('checkbox', {name: 'remember me'}) //
screen.getByRole('checkbox', {name: 'Remember Me'}) //

// other queries accept text matches as well


// the text match argument can also be a function
screen.getByText((text, element) => {/* return true/false
*/})

Visit our playground at: https://testing-playground.com and did you try out the eslint plugins?

You might also like