Cheatsheet

published: 2026-07-02

tags: development,javascript,react,Testing,Cheatsheet

Simple and complete cheat sheet Find the PDF version here

render a component

import { render } from '@testing-library/react'

const result = render(<MyComponent />)

search the DOM

• getByRole

import { screen, render } from '@testing-library/react'

render(
  <label>
    Remember Me <input type="checkbox" />
  </label>,
)

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

getByRole method

interact with element

import { userEvent } from '@testing-library/react'

// userEvent simulates advanced browser interactions like
// clicks, type, uploads, tabbing etc
// Click on a button

userEvent.click(screen.getByRole('button'))

// Types HelloWorld in a text field
userEvent.type(screen.getByRole('textbox'), 'Hello World')

screen

debug(element)|Pretty print the DOM ...queries|Functions to query the DOM

search variants|(result)

getBy|Element or Error getAllBy|Element[] or Error queryBy|Element or null queryAllBy|Element[] or [] findBy|Promise or Promise findAllBy|Promise<Element[]> or Promise

text matches

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
*/})

wait for appearance

test('movie title appears', async () => {
  render(<Movie />)

  // the element isn't available yet, so wait for it:
  const movieTitle = await screen.findByText(
    /the lion king/i,
  )

  // the element is there but we want to wait for it
  // to be removed
  await waitForElementToBeRemoved(() =>
    screen.getByLabelText(/loading/i),
  )

  // we want to wait until an assertion passes
  await waitFor(() =>
    expect(mockFn).toHaveBeenCalledWith('some arg'),
  )
})

All credit goes to React Testing Library Github