react.dev/docs/reference-test-renderer.md

id, title, permalink, layout, category

id	title	permalink	layout	category
test-renderer	Test Renderer	docs/test-renderer.html	docs	Reference

Importing

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

Overview

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or jsdom.

Example:

import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(testRenderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: Learn more about it.

You can also traverse the output to find specific nodes and make assertions about them.

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">Hello</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">Sub</p>
  );
}

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;

expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

TestRenderer

• TestRenderer.create()

TestRenderer instance

• testRenderer.toJSON()
• testRenderer.toTree()
• testRenderer.update()
• testRenderer.unmount()
• testRenderer.getInstance()
• testRenderer.root

TestInstance

• testInstance.find()
• testInstance.findByType()
• testInstance.findByProps()
• testInstance.findAll()
• testInstance.findAllByType()
• testInstance.findAllByProps()
• testInstance.instance
• testInstance.type
• testInstance.props
• testInstance.parent
• testInstance.children

Reference

TestRenderer.create()

TestRenderer.create(element, options);

Create a TestRenderer instance with a passed element, which has the following methods and properties.

testRenderer.toJSON()

testRenderer.toJSON()

Return a JSON object representing the element.

testRenderer.toTree()

testRenderer.toTree()

Return a tree object representing the element.

testRenderer.update()

testRenderer.update(element)

Update the element with a passed element.

testRenderer.unmount()

testRenderer.unmount()

Unmount the element from testRenderer.

testRenderer.getInstance()

testRenderer.getInstance()

Return a root container instance.

testRenderer.root

testRenderer.root

root is a testInstance, which has the following methods and properties.

testInstance.find()

testInstance.find(test)

Find a descendant testInstance that test(testInstance) is true.

testInstance.findByType()

testInstance.findByType(type)

Find a descendant testInstance that matches the provided type.

testInstance.findByProps()

testInstance.findByProps(props)

Find a descendant testInstance that matches the provided props.

testInstance.findAll()

testInstance.findAll(test)

Find all descendant testInstances that test(testInstance) is true.

testInstance.findAllByType()

testInstance.findAllByType(type)

Find all descendant testInstances that matches the provided type.

testInstance.findAllByProps()

testInstance.findAllByProps(props)

Find all descendant testInstances that matches the provided props.

testInstance.instance

testInstance.instance

instance is a component instance of the testInstance.

testInstance.type

testInstance.type

type is a Component type of the testInstance.

testInstance.props

testInstance.props

props is a props object of the testInstance.

testInstance.parent

testInstance.parent

parent is a parent testInstance.

testInstance.children

testInstance.children

children is children of the testInstance.

Ideas

You can pass createNodeMock function to TestRenderer.create as the option, which allows for custom mock refs. createNodeMock accepts the current element and should return a mock ref object. This is useful when you test a component rely on refs.

import TestRenderer from 'react-test-renderer';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = null;
  }
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return <input type="text" ref={el => this.input = el} />
  }
}

let focused = false;
TestRenderer.create(
  <MyComponent />,
  {
    createNodeMock: (element) => {
      if (element.type === 'input') {
        // mock a focus function
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);