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

Pro

GetBy, QueryBy, FindBy

Current

Single vs Multiple queries

Pro

Picking a query function by priority

Pro

Accessing queries with the screen object

Pro

Common query options (except TextMatch)

Pro

TextMatch in detail

Pro

Getting direct access to the DOM

Pro

React Testing Library queries

ByRole (common uses)

Pro

ByRole (less common uses)

RTL Queries: GetBy, QueryBy, FindBy

There are different ways to find elements in your rendered React component tests. For example ...byText(), ...byLabelText(), ...byRole(), etc.

(We will cover all of those specific ones in detail later in this course.)

Each query has three variants. It is important to learn and remember their differences.

In this lesson, we will cover getBy, queryBy, and findBy.

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 & code editor...

Share this lesson with your teamTweet (X) it

Invite a teammate to learn with you by sharing this lesson or dropping the link in your team chat.

Ready to try running tests for this lesson?