Single vs Multiple queries - Finding elements with React Testing Library queries

Finding elements with React Testing Library queries

Become familiar with all the ways to find elements in your rendered components with React Testing Library. This is a more in depth look at all the getBy, findBy and queryBy functions

React Testing Library queries intro

Intro to React Testing Library queries

Not started

GetBy, QueryBy, FindBy

Not started

Single vs Multiple queries

Current

Picking a query function by priority

Not started

Accessing queries with the screen object

Not started

Common query options (except TextMatch)

Not started

TextMatch in detail

Not started

Getting direct access to the DOM

Not started

React Testing Library queries

ByRole (common uses)

Not started

ByRole (less common uses)

Single vs Multiple queries

In the previous lesson we covered the different types of queries (getBy, findBy, queryBy).

For all the functions that use those (like getByText()), they will throw if more than one element is found.

If you are expecting more than one result, then you have to use the ...AllBy... functions, like:

getAllByText() / findAllByText() / queryAllByText()
getAllByPlaceholderText() / findAllByPlaceholderText() / queryAllByPlaceholderText()

Basically just add the All suffix in the function you call:

getBy... -> getAllBy...
queryBy... -> queryAllBy...
findBy... -> findAllBy...

These will return an array of elements.

This is also covered in our main React testing course. If you've taken that already, you can skip this lesson.

We'll soon move into the more advanced query APIs.

Loading full lesson content & code...

Ready to try running tests for this lesson?