Example
Before going over a few methods from the module, we will write a code to test a sample React Component. Remember, we have not created the component yet, and this practice is also known as Test-Driven Development (TDD).
In simple words, TDD is a development practice that focuses on building unit test cases before developing the actual code.
For our example of the Snapshot Test, we will write a test for a simple button component. We will analyze some methods that we use in this test code later.
Program:
import React from "react"; // import react api.
import { create } from "react-test-renderer"; // import react-test-renderer module.
// Our Button Component.
function Button(props) {
return <button>Nothing to do yet</button>;
}
describe("Button component", () => {
test("Matches the snapshot", () => {
const button = create(<Button />);
expect(button.toJSON()).toMatchSnapshot();
});
});
You can also try this code with Online Javascript Compiler
Output:
Methods
There are multiple method calls that the test-case-renderer module contains. We have used a few of these in our button component example. We will now understand the use of these methods and some others that we didn't.
1.) testrenderer.create()
The create method creates a TestRenderer instance with the passed React element. It does not use the real DOM but fully renders the component tree into the memory to make assertions about it.
TestRenderer.create(element, options);
You can also try this code with Online Javascript Compiler
In our example of the button component test, we have imported the create method at the top level instead of calling it from the react-test-renderer object.
Create method returns a TestRenderer instance.
2.) testrenderer.toJSON()
toJSON returns an object representing the rendered tree which only contains the platform-specific nodes like <div> or <View> and their props. But this tree does not contain any user-written components.
testRenderer.toJSON();
You can also try this code with Online Javascript Compiler
3.) testrenderer.act()
act method prepares a component for assertions. This method gives a way to use Act API with the react test renderer.
testrenderer.act(callback);
You can also try this code with Online Javascript Compiler
In this example, you can import act similar to how you imported create. You can use Act API to wrap calls to testrenderer.create and testrenderer.update.
In the code below, we will firstly make changes to the button component in our previous example.
Program:
import React, { useState } from "react";
import { create, act } from "react-test-renderer";
function Button(props) {
const [text, setText] = useState("");
function handleClick() {
setText("PROCEED TO CHECKOUT");
}
return <button onClick={handleClick}>{text || props.text}</button>;
}
You can also try this code with Online Javascript Compiler
Now we have a complete react component to test, and we have imported act alongside create from the react-test-renderer.
Our test must use act() for any action that changes a component's state, like clicking on a function passed as a prop or "mounting" it. So we will incorporate act in our test.
Program:
import React, { useState } from "react";
import { create, act } from "react-test-renderer";
function Button(props) {
const [text, setText] = useState("");
function handleClick() {
setText("CHECKOUT");
}
return <button onClick={handleClick}>{text || props.text}</button>;
}
describe("Button component", () => {
test("shows the expected text when clicked", () => {
let component;
act(() => {
component = create(<Button text="BECOME A NINJA CODER" />);
});
const instance = component.root;
const button = instance.findByType("button");
act(() => button.props.onClick());
expect(button.props.children).toBe("CHECKOUT");
});
});
You can also try this code with Online Javascript Compiler
Output:
4.) testrenderer.root
root method returns the root "test instance" object, which helps assert specific nodes in the tree, similar to what we have done in our example. You can use it to find other "test instances" deeper below.
testRenderer.root;
You can also try this code with Online Javascript Compiler
5.) testrenderer.getInstance()
getInstance method returns the instance corresponding to the root element if available. This method will not work if the root element is a function component because those root elements don't have instances.
We can incorporate this method in our button component test to create instances instead of root. However, it is worth noting the earlier version of the test code using the root method is the more efficient approach.
Program:
import React from "react";
import { create } from "react-test-renderer";
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { text: "" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { text: "PROCEED TO CHECKOUT" };
});
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.text || this.props.text}
</button>
);
}
}
describe("Button component", () => {
test("it shows the expected text when clicked ", () => {
const component = create(<Button text="BECOME A NINJA CODER" />);
const instance = component.getInstance();
expect(instance.state.text).toBe("");
instance.handleClick();
expect(instance.state.text).toBe("PROCEED TO CHECKOUT");
});
});
You can also try this code with Online Javascript Compiler
Output:
This code will also work similarly to our previous one. The difference here is that we have not used React Hooks to construct our button element as we did earlier.
FAQs
1. What are Elements in React?
Elements are the smallest building blocks in a React application. An element will describe what you want to see on the screen. For example,
const element = <h1>Hello, world</h1>;
You can also try this code with Online Javascript Compiler
2. What are hooks in React?
Hooks are functions that let us “hook into” React state and lifecycle features from function components. They let you use React without classes and don't work inside classes.
useState is the hook in the example that we used earlier.
import React, { useState } from "react";
import { create, act } from "react-test-renderer";
function Button(props) {
const [text, setText] = useState("");
function handleClick() {
setText("CHECKOUT");
}
return <button onClick={handleClick}>{text || props.text}</button>;
}
You can also try this code with Online Javascript Compiler
3. What is a DOM element?
Document Object Model(DOM) is a structured representation of the HTML elements present in a webpage or web app. It represents the entire UI of your application.
4. What is render and return in React?
Render is called in the component, whereas return is what renders. Return is the actual output, but you can log, set variables, conditional rendering, etc., in the render.
Key Takeaways
This article has gone through the React Test Renderer module available in Javascript for testing. With the help of a simple Button Component, we also worked with the module and some of the methods.
React Test Renderer also allows us to work with Act API, explained here.
If you had any problems following this article, You could learn more about React JS with our comprehensive course available here.
Hence learning never stops, and there is a lot more to learn. So head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more. Till then, Happy Learning!
19+ registered 
