Using testing-playground with React Testing Library

React Testing Library is a popular testing utility tool for front-end testing.

Challenges can arise using React Testing Library, when trying to work out how to target an element.
A logical option may be to add a data-testid attribute to the element you want to target. Yet, there are a few downsides to this approach.

According to the React Testing Library guiding principles,

The more your tests resemble the way your software is used, the more confidence they can give you.
-- Kent C Dodds

We can often spend time testing implementation details. Using the data-testid attribute on an element is only testing that the element exists. Our focus when testing should be on the user, for example, what the user sees, or how the user interacts with it.

It can be a struggle to work out how to target elements without the use of data-testid...

Thankfully, we have the testing-playground!

The testing playground is a tool which gives you a visual representation of the DOM, and helps you discover the best queries to target elements.

How to access the playground from within your tests

There are two ways you can access the playground:

1. Logging the testing playground from within a test generates a link within your console when you run your tests, which you can open in the browser.

import { screen } from "@testing-library/react"

     it('test it block', () => {
       ...
       screen.logTestingPlaygroundURL();
       expect(...)
     })

1. Call the debug method screen.debug(), which prints out the DOM output. Copy and paste the DOM output into the testing playground directly.

Once the playground is open, you can navigate around it using the inspect-tool, much like the developer tools 'inspect'. When you inspect an element in the visual DOM, selecting it will display the suggested query to copy into your tests. The display gives you information about accessible and semantic ways to query your element. For example, buttons can be targeted using the accessible role of button.

The testing playground provides you with direct feedback when you make edits to the code. The playground displays improvements you can make to your code and queries, for example how to make your queries more specific by adding a name. Using the suggested queries is preferable to using the non-specific test-ids.

Another helpful use of the testing playground is to confirm what elements are visible in the DOM. You may be expecting to see a success message after a user clicks a button. If your test fails you can use the playground as a debugging tool to see what is visible to the user. Alternatively, you can use screen.debug() for the DOM output.

In summary, the testing playground is a great tool to use in conjunction with React Testing Library 🐸
Give it a go, and see how it can improve your testing skills.

Comments

[Stephan Meijer]

Thanks for writing about testing-playground.com @katieraby, Amazing!

For readers; please know that it's open source. If you ever feel that it can be improved, please open a ticket or pull request. We have Chrome and Firefox extensions as well. Links to those can be found in the "more menu" on the top right corner at testing-playground.com.

[Katie Raby]

Thanks for creating such a useful tool Stephan! Great to hear that it is open source and PRs are welcome. I look forward to any future improvements, and will perhaps make a contribution myself some day 😄

[Fernando Ferrari]

That is great content, thank you!