How do getBy, queryBy, and findBy queries differ in React Testing Library?

Short answer

getBy immediately returns an element or throws if missing; queryBy returns null if missing (useful for checking absence); findBy is asynchronous and waits for an element to appear (for Promises and animations).

Explanation

Use getBy for elements that should be immediately present in the DOM. Use queryBy to verify that an element is absent, such as expect(screen.queryByText(/error/)).not.toBeInTheDocument(). Use findBy when waiting for asynchronous server data or delayed effects; it keeps retrying until the timeout expires.

Code example

// 1. Synchronous current element
const title = screen.getByRole('heading');

// 2. Assert that it is not visible
expect(screen.queryByText('Error message')).toBeNull();

// 3. Wait for an element to appear after calling API
const successMessage = await screen.findByText('Saved successfully', {}, { timeout: 3000 });

Common mistakes

• Using getBy inside expect(...).not.toBeInTheDocument(), which throws immediately before expect runs.

Follow-up questions

• What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?

Sources

• Testing Library docs — About Queries