Skip to main content
Sheelah Brennan

React Testing Library: Tips and Tricks

Testing front-end web applications has gotten a lot easier! But that doesn't mean it doesn't involve some ramp-up on tooling. In this article I'll provide some tips and tricks for getting started and ramping up quickly with React Testing Library, the most popular tool for React component testing today.

Getting Started

The docs are great, so if you're new to the library, you should definitely take a quick look there.

Deciding on Queries to Use

In order to write tests, you'll use the library to render your component and then write one or more queries to find certain DOM elements on the page. The question you'll have is which query to use! There are a lot of them. The best practice here is to query for actual visible elements in the DOM, such as querying for buttons with certain text, form inputs, images with certain alt text, etc.

Here's an example of querying for a button with "Read More" text:

const button = screen.getByRole("button", { name: /read more/i })

These queries can be used to look for certain text elements too! Here's an example of querying for a h1 heading:

const button = screen.getByRole("heading", { level: "h1" })

getByRole queries are the ones that you will likely be reaching for the most, and any element listed in this roles list can be queried for. The bonus of using these queries is that you're helping to ensure that your components are accessible and available for assistive technology like screen readers!

To help with finding an appropriate query, there is a useful Chrome extension that you can try that's called Testing Playground.

You'll also notice that there are bothgetBy* queries and queryBy* queries. The main difference is that getBy* queries return the actual DOM element matched and throw an error if the element is not found. queryBy* queries are similar in that they also return the actual DOM node matched, but they return null if no match was found. How do you know which to use? Reach for getBy* queries unless you want to test for an element that may not be present. In that case you'll want to use queryBy* queries. An example of a good use case for queryBy* queries is when you want to test that an element is not present.

Querying for Single and Multiple Items

With React Testing Library, you'll notice that there are both getAllBy* and getBy* queries. When you're just searching for a single element, you'll want to use a getBy* query. For cases where you want to query for multiple items, such as an unordered list of elements, you'll want to use a getAllBy* query.

Debugging Errors or Missing Elements

Sometimes your tests will fail unexpectedly and you'll wonder what is being rendered. Don't worry -- there's a utility for that! Use screen.debug() inside your test and you'll then get a full printout of what was rendered.

Testing Hidden Elements

Sometimes you'll want to test a component that is hidden. For example, an element might have aria-hidden=true on it if it has surrounding label text. In this case, if you query for the element, you'll find that you don't get any matching element found.

The fix is to include { hidden: true } in your query. Then the library will also include hidden elements in query results.

Example:

const buttons = screen.getByRole("button", { hidden: true })

See the documentation on this for more information.

More Test Assertion Options

To have access to a wider array of Jest assertion options to use in your tests, I highly recommend installing the jest-dom library. It works great with React testing library and lets you write some useful assertions without extra legwork. For example, you can test that a link element has a certain href attribute like:

const link = screen.getByRole("link", { name: "Get Started" })
expect(link).toHaveAttribute("href", "https://example.com")

That's all! I'd love to hear what your favorite React Testing Library tip is. Feel free to share in the comments or find me on Twitter.

Follow Me

Built with ♥ and Gatsby, hosted on Netlify

My new Skillshare course: Make Your Website Stand Out