What happens when we run our tests?
Whenever we run our tests, they are executed in a Node.js environment. There is no browser like Chrome or Firefox involved. If we render our component by calling that render function, a fake browser environment is created by a library called jsdom.
After we render our component, we can then access elements that have been placed or rendered in here by using this screen object.
And we imported that screen object from the React Testing library.
// Manipulate the component or find an element in it
const inputs = screen.getAllByRole('textbox');
const button = screen.getByRole('button');
It is extremely common in just about every single test we ever write out that we’re going to render a component and then try to find some elements that are component produced. A super important part of testing is finding the elements that our component has created.
React Testing Library Query System
Query functions are how we are going to find elements that are components has rendered these query functions. But, the query functions can be a little bit tedious to use sometimes.
There is a collection of roughly 48 functions used to find elements but you don’t need to memorize them.
ARIA ROLES
In the code shown above you can see that we use the getAllByRole and getByRole functions, the word role is referring to something called an ARIA Role.
On the developer.mozilla.org website, you can obtain all the information necessary to understand its operation and objective. We can highlight a couple of points.
- Arial Roles clarify the purpose of an HTML element.
- Traditionally used by screen readers (software to help people understand the content on the screen).
- Many HTML elements have an ‘implicit’ or automatically assigned role.
- Elements can be manually assigned a role (Sometimes more experienced people do it incorrectly)
As we are not experienced engineers in this matter we are not going to do manual assignments too often. We’re really just going to depend upon the implicit role of different elements.
The role system is the primary or preferred way of finding elements that have been rendered by our component. React Testing library really pushes you in this direction (if you don’t want to use roles at all, there are many other ways that we can find elements that are component has rendered).
React Testing Library: Getting Help with Query Funcions
We are rendering our component, but now we need to figure out how we can find the number of rows that have been rendered. Query functions allow us to find elements that have been rendered by our component.
You might just not know off the top of your head how to write out a query function to find all these different rows. Fortunately, there’s a nice tool.
We can use a nice little trick to help us understand how to find particular elements.
screen.logTestingPlaygroundURL()
For debugging using testing-playground, the screen exposes this convenient method which logs and returns a URL that can be opened in a browser.
This method takes the HTML currently rendered by your component and creates a link to view that HTML in the ‘Testing Playground‘ tool. This tool helps you write queries (functions to find elements).
A picture is worth a thousand words, you can see how it works in the video at the top of this page.
Leave a Reply
Want to join the discussion?Feel free to contribute!