ReactJS - testRenderer.root Property

---

---

"testRenderer.root" is a programming command. It is like a key that unlocks and grants entry to the main or upper level of a testing structure. This key allows programmers to evaluate and test various elements or parts of an application.

It is like the primary branch of a tree, directing us through the branches and leaves that represent different elements in the app. In simple terms, "testRenderer.root" allows developers to review and ensure that everything in their code is operating properly.

Syntax

testRenderer.root

Parameters

This method does not accept any argument.

Return Value

This method will return the main "test instance" or the starting point for checking and understanding different parts of our code.

Examples

Example − Basic Component Test

The will have a simple React component (MyComponent.js) and a corresponding test file (MyComponent.test.js). This is a basic React functional component named MyComponent. It does not take any props and simply returns a JSX element, rendering a <div> with the text "Hello, World!". And MyComponent.test.js is a test file for MyComponent. It uses the react-test-renderer library, which is a React package for rendering components in tests. The test function is used to define a test case, checking if MyComponent renders correctly.

MyComponent.js

import React from 'react';

const MyComponent = () => {
   return <div>Hello, World!</div>;
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import TestRenderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders MyComponent correctly', () => {
   const testRenderer = TestRenderer.create(<MyComponent />);
   const root = testRenderer.root;
   
   // Perform assertions using root
   expect(root.findByType('div').props.children).toBe('Hello, World!');
});

Output

So, it performs an assertion, checking if the text content of the <div> element inside MyComponent is "Hello, World!".

Example − Testing With Props

In this app the code consists of a React component (Greeting.js) and a corresponding test file (Greeting.test.js). Greeting.js is a React functional component named Greeting. It takes a prop name and uses it to dynamically render a greeting message in a <div> element. The message says "Hello, " followed by the value of the name prop. Greeting.test.js is a test file for the Greeting component. It uses the react-test-renderer library to create a test renderer and render the Greeting component with the prop name set to "Ankit".

Greeting.js

import React from 'react';

const Greeting = ({ name }) => {
return <div>Hello, {name}!</div>;
};

export default Greeting;

Greeting.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Greeting from './Greeting';

test('renders Greeting correctly with props', () => {
   const testRenderer = TestRenderer.create(<Greeting name="Ankit" />);
   const root = testRenderer.root;
   
   // Perform assertions using root
   expect(root.findByType('div').props.children).toBe('Hello, Ankit!');
});

Output

Example

In this app we will have a React component (Counter.js) and a corresponding test file (Counter.test.js). Counter.js file is a React functional component. It maintains a state variable count using the useState hook, initialized to 0. The component renders a <div> containing a <p> element displaying the current count and a <button> that, when clicked, calls the increment function and updates the count. Counter.test.js file is a test file for the Counter component. The test case is created to check whether the count is correctly incremented when the button is clicked.

Counter.js

import React, { useState } from 'react';

const Counter = () => {
   const [count, setCount] = useState(0);
   
   const increment = () => setCount(count + 1);
   
   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
      </div>
   );
};

export default Counter;

Counter.test.js

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Counter from './Counter';

test('increments count when the button is clicked', () => {
   const testRenderer = TestRenderer.create(<Counter />);
   const root = testRenderer.root;
   
   // Check initial count
   expect(root.findByType('p').props.children).toBe('Count: 0');
   
   // Simulate button click
   root.findByType('button').props.onClick();
   
   // Check if count is incremented
   expect(root.findByType('p').props.children).toBe('Count: 1');
});

Output

Summary

testRenderer.root is a method used in testing React components. When using a testing library like react-test-renderer, this method provides access to the root or top-level instance of the rendered component tree. It allows testers to make assertions and perform tests on different parts of the component. So we have seen the usage of this method and created three different apps to understand this concept practically.