React Test Renderer

React Test Renderer

The React Test Renderer is a package that allows us to render React components as pure Javascript Objects without needing a DOM. Using the React Test Renderer, we can skip the need for a DOM or any native environment to test our React components. 

Setup

To use the React Test Renderer package, import the following files at the start of your code.

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

 

Now we shall look into the most useful commands from the React Test Renderer package.

TestRenderer.create()

TestRenderer.create(element, options);

 

This command is the starting point for all our React Test Renderer package work. This command helps make a "TestRenderer" instance of any React component. It does not use the DOM but still fully renders the component into the given memory so that assertions can be made on it for testing purposes.

TestRenderer.act()

TestRenderer.act(callback);

 

This React Test Renderer package command is very similar to the act() command provided by the React Test Utilities. This command helps prepare components for assertions. We use this to wrap commands like TestRenderer.create(). We can look at its usage through the following example.

// Importing the React Test Renderer package.
import {create, act} from 'react-test-renderer'; 


// Component to be tested
import TestApp from './app.js'; 


// Rendering the component
var root; 
 // act() called to wrap create()
act(() => {
  // Create() function called.
  root = create(<TestApp value={1}/>) 
});


// Assertion part of testing process
expect(root.toJSON()).toMatchSnapshot();


// Updating the component
act(() => {
  root.update(<TestApp value={2}/>);
})


// Making further assertions.
expect(root.toJSON()).toMatchSnapshot();

 

We shall look into the various commands used in the above code in detail below.

testRenderer.toJSON()

testRenderer.toJSON()

 

The testRenderer.toJSON() method is used to create an object of the rendered tree. This object only contains platform-specific nodes like <div> or <View> and their props but doesn't contain user-written components. This method is beneficial when we have to do snapshot testing.

testRenderer.toTree()

testRenderer.toTree()

 

This method also returns an object just like the toJSON() method, but the toTree() object is more detailed and contains the user-defined components. This command, however, is rarely used unless a developer wants to write their assertions over the testing package. 

testRenderer.update()

testRenderer.update(element)

 

This command is used to re-render a component in the memory tree. The memory tree gets updated if the key of the new component is the same as before, whereas it re-mounts a new tree if the key is different. 

testRenderer.unmount()

testRenderer.unmount()

 

This method is used to unmount the components mounted in the memory tree. Once this method is called, it triggers the lifecycle events. 

testRenderer.getInstance()

testRenderer.getInstance()

 

This method returns the TestRenderer instance of the current root component. This will not work if the root component is a function component as it doesn't have instances.

testRenderer.root

testRenderer.root

 

This method returns the root "test instance" of the objects mounted in the memory tree. This instance is then used to find other detailed and deeper instances

testInstance.find()

testInstance.find(test)

 

This method is used to find the single descendant test instance for which test(testInstance) returns true. If there is more than one such instance, this method will throw an error.

testInstance.findByType()

testInstance.findByType(type)

 

This method is used to find TestRenderer instances of the specified type. If there is more than one such instance, this method will throw an error.

testInstance.findByProps()

testInstance.findByProps(props)

 

This method is used to find TestRenderer instances using the provided props. If there is more than one such instance, this method throws an error.

testInstance.findAll()

testInstance.findAll(test)

 

This method is used to find all such instances which return true for the test specified.

testInstance.findAllByType()

testInstance.findAllByType(type)

 

This method is used to find all TestRenderer of a given specified type.

testInstance.findAllByProps()

testInstance.findAllByProps(props)

 

This method is used to find all TestRenderer using specified props.

testInstance.instance

testInstance.instance

 

This React Test Renderer method returns the component instance for this test instance. This only works for class-based components as functional components do not have instances.

testInstance.type

testInstance.type

 

This returns the component type of the given test instance. For example a component <Navbar/> has type Navbar.

testInstance.props

testInstance.props

 

The testInstance.props method returns the component props corresponding to a test instance. For example, the component <Navbar col = “bg-dark”/> has the props {col:”bg-dark”}.

testInstance.parent

testInstance.parent

 

This method returns the parent test instance of the given test instance.

testInstance.children

testInstance.children

 

This method returns all the child instances of the given test instance.

FAQs

1. How to install React Test Renderer?
   We can install react test renderer using npm with the following command: npm i react-test-renderer.
    
2. What is the difference between the toTree() method and the toJSON() method in the React Test Renderer package?
   The difference between the two methods from the React Test Renderer package is that the object created by the toJSON() method does not contain the components defined by users. In contrast, the object created by the toTree() method does.

Key Takeaways

This blog covered the in-detail explanation of all the methods associated with the React Test Renderer, a package used to render React components into the memory tree without needing a DOM. The React Test Renderer is useful for building production-level React applications. Now that you have understood the intricacies of the testing mechanism in React continue your MERN stack journey by following this link.