- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - scryRenderedDOMComponentsWithClass()
As we all know React is a very popular library for creating responsive and interactive web applications. There is a function called scryRenderedDOMComponentsWithClass() available in the React library. This function locates all DOM elements of components in a rendered tree. It looks for DOM components with a class name that matches the one we specify.
Assume we have a tree, similar to a family tree, but for our website. Each branch symbolizes a separate part of our website. Now, scryRenderedDOMComponentsWithClass() traverses each branch and selects the elements that have a specific class.
Syntax
scryRenderedDOMComponentsWithClass( tree, className )
Parameters
You put two things inside the parentheses: tree and className.
tree − The word tree refers to our family tree.
className − className is similar to instructing the function to "find things with this specific name or class."
Return Value
This function returns a list of all the DOM elements of the displayed tree's components that match the given class name.
The scryRenderedDOMComponentsWithClass() function is commonly used to test React components. It is a component of the React TestUtils package, which is used to test React components in a number of methods. So we will see different ways to use scryRenderedDOMComponentsWithClass() in different testing scenarios.
Examples
Example − Testing a Counter Component
Let us say we have a counter component and we have to test it.
CounterComponent.js
import React, { useState } from 'react'; const CounterComponent = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( <div> <p className="counter-display">Count: {count}</p> <button className="increment-btn" onClick={increment}> Increment </button> </div> ); }; export default CounterComponent;
CounterComponent.test.js
import React from 'react'; import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react'; import CounterComponent from './CounterComponent'; test('Counter increments correctly', () => { const { container } = render(<CounterComponent />); const incrementButton = scryRenderedDOMComponentsWithClass(container, 'increment-btn')[0]; expect(incrementButton).toBeDefined(); incrementButton.click(); // Check if the count has been updated const counterDisplay = scryRenderedDOMComponentsWithClass(container, 'counter-display')[0]; expect(counterDisplay.textContent).toBe('Count: 1'); });
Output
Explanation − This is similar to a magic button that keeps track of how many times we click it. When we open the website, we will notice a button that says "Click me!" and a count. The number increases by one with each press of the button. It is just like keeping track of how many times we clicked the button.
Example − Testing a Toggle Visibility
Suppose we have a React app in which we have a toggle visibility functionality. So when we click the button it will be visible and again if we press the button the content will disappear.
ToggleComponent.js
import React, { useState } from 'react'; import './App.css'; const ToggleComponent = () => { const [isVisible, setIsVisible] = useState(true); const toggleVisibility = () => { setIsVisible(!isVisible); }; return ( <div className='App'> <button className="toggle-btn" onClick={toggleVisibility}> Toggle Visibility </button> {isVisible && <p className="visible-content">This content is visible!</p>} </div> ); }; export default ToggleComponent;
ToggleComponent.test.js
import React from 'react'; import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react'; import ToggleComponent from './ToggleComponent'; test('Toggle visibility correctly', () => { const { container } = render(<ToggleComponent />); const toggleButton = scryRenderedDOMComponentsWithClass(container, 'toggle-btn')[0]; expect(toggleButton).toBeDefined(); // Simulate a click on the button toggleButton.click(); // Check if the content is now hidden const visibleContent = scryRenderedDOMComponentsWithClass(container, 'visible-content'); expect(visibleContent.length).toBe(0); });
Output
Explanation − Let's test our button that hides and shows items. We tell the code to click the button to see if anything appears, then to press it again to see if it disappears. If our code answers, "Yes, the hiding and showing is working!" we know our button is working.
Example − Testing a List Filter Component
Let us say we have a component which filters a list. So now we will write a test to check that the list is filtered correctly. See the code below to test the ListFilterComponent −
ListFilterComponent.js
import React, { useState } from 'react'; import './App.css'; const ListFilterComponent = () => { const [filterText, setFilterText] = useState(''); const items = ['Apple', 'Banana', 'Orange']; const handleFilterChange = (event) => { setFilterText(event.target.value); }; return ( <div className='App'> <input type="text" className="filter-input" placeholder="Filter list" value={filterText} onChange={handleFilterChange} /> <ul className="filtered-list"> {items .filter((item) => item.toLowerCase().includes(filterText.toLowerCase())) .map((item, index) => ( <li key={index} className="list-item"> {item} </li> ))} </ul> </div> ); }; export default ListFilterComponent;
ListFilterComponent.test.js
import React from 'react'; import { render, scryRenderedDOMComponentsWithClass } from '@testing-library/react'; import ListFilterComponent from './ListFilterComponent'; test('Filter list correctly', () => { const { container } = render(<ListFilterComponent />); const filterInput = scryRenderedDOMComponentsWithClass(container, 'filter-input')[0]; expect(filterInput).toBeDefined(); // Simulate typing in the filter input filterInput.value = 'Banana'; filterInput.dispatchEvent(new Event('input', { bubbles: true })); // Check if the list is correctly filtered const filteredListItems = scryRenderedDOMComponentsWithClass(container, 'list-item'); expect(filteredListItems.length).toBe(1); expect(filteredListItems[0].textContent).toBe('Banana'); });
Output
Explanation − the application functions similarly to a smart list, displaying only what we choose. There is a box where we can type our query. Following that is a list of items like "Apple," "Banana," and "Orange." As we type in the box, the list displays only the things that match to what we typed. It makes it simpler to find items in the list.
For this app, we want to see if our list properly filters items. We tell our testing code to type some words into the box and see if the list only displays items that match. The testing code types "Banana" and checks to see if there are just bananas on the list. If everything goes as planned, our code gives us positive feedback.
Summary
scryRenderedDOMComponentsWithClass() is a React testing function. It allows testers to locate and verify items in a rendered React component by their class names. This function is like having a testing helper who knows classes and helps us in checking that our React components are acting correctly.
To Continue Learning Please Login
Login with Google