MENU


Test Utilities

ReactTestUtils makes it easy to test React components in the testing framework of your choice. Below we use Jest. Most of what ReactTestUtils offers (including Simulate) is nowadays more commonly handled through the higher-level React Testing Library, which most new projects use instead; ReactTestUtils remains available for lower-level test needs.


// Counter.js
import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// Counter.test.js
import { createRoot } from 'react-dom/client';
import { act } from 'react';
import Counter from './Counter';

let container;
let root;
beforeEach(() => {
  // setup
  container = document.createElement('div');
  document.body.appendChild(container);
  root = createRoot(container);
});
afterEach(() => {
  // teardown
  act(() => {
    root.unmount();
  });
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and the mount effect
  act(() => {
    root.render(<Counter />);
  });
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

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

APIs

isElement(element) returns true if element is any React element.

isElementOfType(element, componentClass) returns true if element is a React element whose type is of a React componentClass.

isDOMComponent(instance) returns true if instance is a DOM component (such as a <div> or <span>).

isCompositeComponent(instance) returns true if instance is a user-defined component, such as a class or a function.

isCompositeComponentWithType(instance, componentClass) returns true if instance is a component whose type is of a React componentClass.

findAllInRenderedTree(tree, test) traverses all components in tree and accumulates all components where test(component) is true.

{scry|find}RenderedDOMComponent[s]With{Class|Tag|Type}(tree, name) finds all (scry) or one (find) DOM element(s) of components in the rendered tree that are DOM components with the class/tag/componentClass matching name.

renderIntoDocument(element) is effectively equivalent to:


const domContainer = document.createElement('div');
const root = ReactDOM.createRoot(domContainer);
root.render(element);

You will need to have window, window.document and window.document.createElement globally available first.

Simulate.{eventName}(element, [eventData]) simulates an event dispatch on a DOM node with optional eventData event data.


// Example 1: simulate a click
// <button ref={(node) => this.button = node}>...</button>
const buttonNode = this.button;
ReactTestUtils.Simulate.click(buttonNode);

// Example 2: simulate typing then pressing Enter
// <input ref={(node) => this.textInput = node} />
const inputNode = this.textInput;
inputNode.value = 'giraffe';
ReactTestUtils.Simulate.change(inputNode);
ReactTestUtils.Simulate.keyDown(inputNode, {key: "Enter", keyCode: 13, which: 13});