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?