What is render in react test library?

Render makes the queries from DOM Testing Library automatically return their first argument bound to the base element, 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.

What does getByText do?

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

What does getByDisplayValue do?

The query getByDisplayValue fetches the element with the specific value of an element given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByDisplayValue method.

Table of contents

Introduction

ByText

DisplayValue

FAQs

Key Takeaways

Last Updated: Mar 27, 2024

Easy

ByText and DisplayValue Queries

Author 19RH1A05H6 Thanvi lahari Pendyala

Introduction

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. The testing library provides us with various queries to perform based on the content and the required output. We can perform queries to fetch a single element or multiple elements. Let’s explore the queries ByText and DisplayValue in this article.

ByText

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

getByText
queryByText
getAllByText
queryAllByText
findByText
findAllByText

Suppose we have an element with text, as shown below.

<p>Coding Ninjas is the best E-Learning platform with thousands of unique courses</p>
<p>Coding Ninjas</p>

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.getByText(/UNIIQUE/i) 
//fetches first element with matching text,ignores cases.

const result1 = screen.getAllByText(/coding ninjas/i) 
//fetches all the elements with matching text, ignores cases.

We imported render and screen from the react testing library to fetch and render the component. We performed the queries getByText and getAllByText using the screen to find the matching text elements on the web page. The getByText returns the first matching element with the text “UNIQUE” and ignores the case, whereas the getAllByText returns all the elements with matching text “coding ninjas” without considering the case.

DisplayValue

The DisplayValue fetches the matching display value from input, text area, and select elements. We can use DisplayValue as both a single element and multiple elements query. The methods that use DisplayValue are

getByDisplayValue
queryByDisplayValue
getAllByDisplayValue
queryAllByDisplayValue
findByDisplayValue
findAllByDisplayValue

Suppose we have a select tag element as shown below.

<select>
  <option value="">Toppings</option>
  <option value="olives">Olives</option>
  <option value="Cheese">Cheese</option>
  <option value="Mushroom">Mushroom</option>
</select>

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.getByDisplayValue(/mushroom/i) 
//fetches first element with matching text,ignores cases.

The getByDisplayValue fetches the matching element with value mushroom ignoring cases from the webpage. It returns the third option from the select element as a result.

Similarly, all the other query and find methods fetch the elements for specific text and display values.

FAQs

What is a query?
The testing library provides the Queries to find elements on a page. We select different types of queries based on the content.
What is render in react test library?
Render makes the queries from DOM Testing Library automatically return their first argument bound to the base element, 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.
What does getByText do?
The query getByText fetches the element with the specific text given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByText method.
What does getByDisplayValue do?
The query getByDisplayValue fetches the element with the specific value of an element given as a parameter to the method and returns it to the variable. To fetch multiple elements, we can use the getAllByDisplayValue method.

Key Takeaways

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

Hey Ninjas! We hope this blog helped you enhance your knowledge of queries. If you want to learn more about queries, check out our article on Introduction to Queries to understand better. Please visit Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Do upvote our blog to help the other ninjas grow.

Happy Coding!

Live masterclass

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Groups, Ex - Udaan, OYO

10 Sep, 2024

01:30 PM

306+ registered

View more events