React Test Utilities

React Test Utilities

Since the first part of the testing process is to make a component available for testing, let us see how that can be done using the react test utilities. 

act()

React, in its set of React test utilities, offers us the act() method. The act() method from the test utilities pack makes the component ready for testing. In simple terms, we wrap our component's code in an act() block so that the tests we make on the component are closer to how React works in the browser. 

As an example, let us look at the code below. The code below has a class-based react component that displays the number of times a user has clicked on a button.

Filename: App.test.js

class Count extends React.Component {
  constructor(props) {
    super(props);
    this.state = {num: 0};
    this.handleClick = this.handleClick.bind(this);
  }


  componentDidMount() {
    document.title = `You have clicked this ${this.state.num} times`;
  }


  componentDidUpdate() {
    document.title = `You have clicked this ${this.state.num} times`;
  }


  handleClick() {
    this.setState(state => ({
      num: state.num + 1,
    }));
  }


  render() {
    return (
      <div>
        <p>You have clicked this {this.state.num} times</p>
        <button onClick={this.handleClick}>
          Click here!
        </button>
      </div>
    );
  }
}

You can also try this code with Online Javascript Compiler

Run Code

We would make the following changes to the code to test this component using React's test utilities.

Filename: App.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Count from './Count';


let container;


beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});


afterEach(() => {
  document.body.removeChild(container);
  container = null;
});


// The ‘it’ keyword is used to describe the test
it('can render and update a counter', () => { 
  // This part tests the first render and componentDidMount
  act(() => {    ReactDOM.render(<Count />, container);  }); 
  const button = container.querySelector('button');
  const label = container.querySelector('p');
 // The expect keyword is the assertion part of the testing process.
  expect(label.textContent).toBe('You have clicked 0 times');   expect(document.title).toBe('You have clicked 0 times');


  // This tests the second render and componentDidUpdate
  act(() => {    
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('You have just clicked 1 times');
  expect(document.title).toBe('You have just clicked 1 times');
});

You can also try this code with Online Javascript Compiler

Run Code

Below is a list of some of the most commonly used methods from the React Test Utilities library. 

isElement()

This checks if a given element is a react component. Returns true if yes, false if not.

isElement(element)

You can also try this code with Online Javascript Compiler

Run Code

isElementOfType()

Returns true if a given element is a react component of type componentClass.

isElementOfType(
  element,
  componentClass
)

You can also try this code with Online Javascript Compiler

Run Code

isDOMComponent()

This is again a boolean-type return statement. It returns true if the given instance is a DOM() Component. A DOM component is anything rendered on the DOM, such as a <div> or a <span>.

isDOMComponent(instance)

You can also try this code with Online Javascript Compiler

Run Code

isCompositeComponent()

Again a boolean-type return statement, this method returns true if a given component is user-defined, such as a class or a function.

isCompositeComponent(instance)

You can also try this code with Online Javascript Compiler

Run Code

A variation of this method is the isCompositeComponentOfType() method. 

findAllInRenderedTree()

This method runs through an entire tree and finds all components which return true on the specified test. Though this method is not very useful on its own, it becomes beneficial when used together with other methods.

findAllInRenderedTree(
  Example tree,
  Specific test
)

You can also try this code with Online Javascript Compiler

Run Code

scryRendered and findRendered

There are two types of methods in the React Test Utilities. scryRendered and findRendered work the same way in all their variations except that findRendered expects only one object to satisfy the given condition. 

DOMComponentWithClass

This checks all DOM components with a specific class inside a tree.

• scryDOMComponentWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

You can also try this code with Online Javascript Compiler

Run Code

• findDOMComponentWithClass()

findRenderedDOMComponentsWithClass(
  tree,
  className
)

You can also try this code with Online Javascript Compiler

Run Code

RenderedComponentWithType()

This finds all instances of a component that match with the given class.

• scryRenderedComponentWithClass()

scryRenderedComponentsWithType(
  tree,
  componentClass
)

You can also try this code with Online Javascript Compiler

Run Code

• findRenderedComponentWithClass()

findRenderedComponentsWithType(
  tree,
  componentClass
)

You can also try this code with Online Javascript Compiler

Run Code

Other Methods

Frequently Asked Questions

1. What is the simulate() utility?
We can simulate any event dispatch on a sample DOM node using this. Simulate has a method for every react event. This includes click events, inputs, and other DOM events that react understands.

2. What is Jest?
Jest is a Javascript testing framework. It is designed and maintained by Facebook Inc., which is also the maintainer of React.

3. Which are the two ways to test components in React?
The two ways to test components in React is either by rendering them in trees in a testing environment and asserting the state or by actually rendering them in a browser.

4. What is Enzyme?
Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

Key Takeaways

This blog explained the various concepts that encapsulate the testing mechanism of any React application using the React Test Utilities. Now that you know how to test React applications using the Test Utilities, you are ready to create production-level applications. 

Now that you have completed your React Journey move on to the next step in MERN stack development with NodeJS. Refer to this link for a collection of NodeJS blogs.