MENU


Test Utilities

ReactTestUtils makes it easy to test React components in the testing framework of your choice. Below we use Jest.


RESETRUNFULL
// Counter.jsimport React from 'react';export default class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
         </button>
      </div>
    );
  }}

// Counter.test.jsimport React from 'react';
  import ReactDOM from 'react-dom';import { act } from 'react-dom/test-utils';import Counter from './Counter';let container;beforeEach(() => {  // setup
  container = document.createElement('div');
  document.body.appendChild(container);});afterEach(() => {   // teardown
  document.body.removeChild(container);
  container = null;});it('can render and update a counter', () => {  // Test first render and componentDidMount
  act(() => {
    ReactDOM.render(<Counter />, container);
  });
  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 componentDidUpdate
  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 APIs 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:


RESETRUNFULL
const domContainer = document.createElement('div');ReactDOM.render(element, domContainer);

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.


RESETRUNFULL
// <button ref={(node) => this.button = node}>...</button>const node = this.button;ReactTestUtils.Simulate.click(node);// <input ref={(node) => this.textInput = node} />const node = this.textInput;node.value = 'giraffe';ReactTestUtils.Simulate.change(node);ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});