React Testing Library cheat sheet

There are many functions to use in the React Testing Library. This blog is a react testing library cheat sheet to help make it easier to understand what to use and when.

What is react?

React is a JavaScript library for building user interfaces. It is declarative, efficient, and flexible. Many popular websites and apps, including Facebook, Instagram, and Netflix use React.

React is based on the idea of building components. Components are reusable pieces of code that can be combined to create complex UIs. Components are easy to create and maintain, making it easy to reuse code across your app.

React uses a virtual DOM to update the UI efficiently. The virtual DOM is a lightweight representation of the real DOM. When the state of your app changes, React updates the virtual DOM and then diff it against the real DOM to determine which parts of the UI need to be updated.

React is a great choice for building dynamic and interactive UIs. It is easy to learn and use, and it has a large and active community.

React testing library

React Testing Library is a lightweight library for testing React components. It provides a set of utility functions that allow you to query the DOM like a user would. This makes it easy to write tests focused on the user experience rather than on the implementation details of your components.

React Testing Library encourages you to test your components in isolation, which makes your tests more maintainable and easier to debug. It also encourages you to test your components similarly to how they are used in your application, which gives you more confidence that your tests are testing the things that matter.

Related post: Want to improve writing unit tests with React Testing Library?

React testing library cheat sheet

	No Match	1 Match	1+ Match	Await?
getBy	throw	return	throw	No
findBy	throw	return	throw	Yes
queryBy	null	return	throw	No
getAllBy	throw	array	array	No
findAllBy	throw	array	array	Yes
queryAllBy	[]	array	array	No

I will use a MyProfile component that displays user account information for the examples. It has various functionality we will discover along the way.

Large Example Test

The following is a large example test just to show different ways of writing tests.

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

test('Load Profile', async () => {
  render(<MyProfile/>)

  // Use waitFor is data is loaded asynchronously
  await waitFor( () => {
     // This will keep throwing until true   
     expect(screen.getByText('Luke Barnes')).toBeInTheDocument(); 
  });
  await screen.findByText('Luke Barnes') // This means the profile is loaded

  // Click button
  fireEvent.click(screen.getByText('Load Friends')) 

 
  // Wait for page to update with query text
  // findAllByText returns an array.
  // Use await find*** becaue an action was taken and you are waiting for the results.
  const items = await screen.findAllByText(/Friend: /) // All friends start with 'Friend: ' for some reason...
  expect(items).toHaveLength(10)

  // If you mention Friend: in other places or think you may in the future.
  // ... In the example above if 'Friend: ' was added in somewhere else in the component the test would fail
  within(screen.findByTestId('friends')).findAllByText(/Friend: /)
  expect(items).toHaveLength(10)

  

})

Wait for asynchronous data to load – waitFor

 // Use waitFor is data is loaded asynchronously (
  await waitFor( () => {
     // This will keep throwing until true
     expect(screen.getByText('Luke Barnes')).toBeInTheDocument();
  });

Matching text

// Matching a string:
getByText('Hello World') // full string match
getByText('llo Worl', {exact: false}) // substring match
getByText('hello world', {exact: false}) // ignore case

// Matching a regex:
getByText(/World/) // substring match
getByText(/world/i) // substring match, ignore case
getByText(/^hello world$/i) // full string match, ignore case
getByText(/Hello W?oRlD/i) // advanced regex

// Matching with a custom function:
getByText((content, element) => content.startsWith('Hello'))

Debug

test('Load Profile', async () => {
  
  render(<MyProfile/>)

  // debug document
  screen.debug()
  // debug single element
  screen.debug(screen.getByText('Luke Barnes'))
  // debug multiple elements
  screen.debug(screen.getAllByText(/Friend: /))
})