The Queries are provided by the testing library to find elements on a page. We select different types of queries based on the content.

What does getByAltText do?

The query getByAltText fetches the element with specific alt text given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByAltText method.

What does getByTitle do?

The query getByTitle fetches the element with a specific title given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByTitle method.

What is render in react test library?

Render makes the queries from DOM Testing Library automatically return their first argument bound to the baseElement, which defaults to document.

What is a testing library?

The React Testing Library is a DOM testing library; instead of dealing with instances of rendered React components, it handles DOM elements and how they behave in the front-end.

Table of contents

Introduction

ByAltText

ByTitle

Frequently Asked Questions

Conclusion

Last Updated: Mar 27, 2024

Easy

ByAltText and ByTitle Queries

Author 19RH1A05H6 Thanvi lahari Pendyala

Introduction

Suppose we have a lot of elements in our database, and we need to find elements of a particular type. It is difficult to go through all the elements and find the ones we need manually. So do we have any technique that can fetch or find all those elements for use according to our requirements? Yes, we have a technique called “Query”.

The testing library provides queries to find elements on a page. We select different types of queries based on the content. After choosing an element to query, we can use the Events API or user-event to trigger events and simulate the user interactions with the page. The testing library provides us with methods to execute queries. We can also use async APIs to await the changes in DOM(Document Object Model). The testing library provides us with various queries to perform based on the content and the required output. There are two types of queries based on the number of elements we perform queries on; single and multiple elements. Let’s explore the queries ByAltText and ByTitle in this article.

ByAltText

The query ByAltText fetches the elements with specific alt text and returns them. We can use ByAltText as both a single element and multiple elements query. The methods that use ByAltText are

getByAltText
queryByAltText
getAllByAltText
queryAllByAltText
findByAltText
findAllByAltText

Suppose we have an image element with alt text as shown below.

<img alt="three minions" src="/minions.png" />

Let’s learn how to fetch this element using these methods with an example.

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const result = screen.getByAltText(/three minions/i) 
//fetches first element matching with alt text

const result1 = screen.getAllByAltText(/three minions/i) //fetches all the elements with matching alt text

We imported render and screen from the react testing library to fetch and render the component. We performed the queries getByAltText and getAllByAltText using the screen to find the matching alt text elements on the web page. The queries return the image element. The getByAltText returns the first matching element with alt text, whereas the getAllByAltText returns all the elements with matching alt texts.

Note: Observe that we used /…../i in both the methods to fetch the element. This character allows us to ignore the casing and fetches the element with similar alt text irrespective of the case.

ByTitle

The query ByTitle fetches the elements with a specific title and returns them. We can use ByTitle as both a single element and multiple elements query. The methods that use ByTitle are

getByTitle
queryByTitle
getAllByTitle
queryAllByTitle
findByTitle
findAllByTitle

Suppose we have an SVG element with the title as shown below.

<span title="Queries"></span>
<svg>
 <title>Coding Ninjas</title>
 <g><path /></g>
</svg>

Let’s learn how to fetch this element using these methods with an example.

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const result = screen.getByTitle(/QUERIES/i) 
//fetches element matching with title “Queries”

const result1 = screen.getByTitle(/coding/i) 
//fetches element matching with title “Coding”

const result2 = screen.getAllByTitle(/ninjas/i)
//fetches all the elements matching with title “ninjas”

The first query getByTitle fetches the element with the title “Queries” and returns it to the variable result. The second query fetches the element with the title “coding”. The third query fetches the element with the title “ninjas”. The queries accept substrings too. So both the second and third queries fetch the same element as the title given in the method is a substring of the title in SVG code.
Similarly, all the other query and find methods fetch the elements for specific alt text and titles.

Frequently Asked Questions

What is a query?
The Queries are provided by the testing library to find elements on a page. We select different types of queries based on the content.
What does getByAltText do?
The query getByAltText fetches the element with specific alt text given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByAltText method.
What does getByTitle do?
The query getByTitle fetches the element with a specific title given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByTitle method.
What is render in react test library?
Render makes the queries from DOM Testing Library automatically return their first argument bound to the baseElement, which defaults to document.
What is a testing library?
The React Testing Library is a DOM testing library; instead of dealing with instances of rendered React components, it handles DOM elements and how they behave in the front-end.

Conclusion

We discussed queries, ByAltText and ByTitle, and how to execute them. Now you can perform basic queries using these methods.