{"componentChunkName":"component---src-templates-docs-js","path":"/docs/test-renderer.html","result":{"data":{"markdownRemark":{"html":"

Importing

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

Overview

\n

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.

\n

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.

\n

Example:

\n
import TestRenderer from 'react-test-renderer';\n\nfunction Link(props) {\n  return <a href={props.page}>{props.children}</a>;\n}\n\nconst testRenderer = TestRenderer.create(\n  <Link page=\"https://www.facebook.com/\">Facebook</Link>\n);\n\nconsole.log(testRenderer.toJSON());\n// { type: 'a',\n//   props: { href: 'https://www.facebook.com/' },\n//   children: [ 'Facebook' ] }
\n

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.

\n

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

\n
import TestRenderer from 'react-test-renderer';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <SubComponent foo=\"bar\" />\n      <p className=\"my\">Hello</p>\n    </div>\n  )\n}\n\nfunction SubComponent() {\n  return (\n    <p className=\"sub\">Sub</p>\n  );\n}\n\nconst testRenderer = TestRenderer.create(<MyComponent />);\nconst testInstance = testRenderer.root;\n\nexpect(testInstance.findByType(SubComponent).props.foo).toBe('bar');\nexpect(testInstance.findByProps({className: \"sub\"}).children).toEqual(['Sub']);
\n

TestRenderer

\n\n

TestRenderer instance

\n\n

TestInstance

\n\n

Reference

\n

TestRenderer.create()

\n
TestRenderer.create(element, options);
\n

Create a TestRenderer instance with the passed React element. It doesn’t use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. Returns a TestRenderer instance.

\n

TestRenderer.act()

\n
TestRenderer.act(callback);
\n

Similar to the act() helper from react-dom/test-utils, TestRenderer.act prepares a component for assertions. Use this version of act() to wrap calls to TestRenderer.create and testRenderer.update.

\n
import {create, act} from 'react-test-renderer';\nimport App from './app.js'; // The component being tested\n\n// render the component\nlet root; \nact(() => {\n  root = create(<App value={1}/>)\n});\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();\n\n// update with some different props\nact(() => {\n  root.update(<App value={2}/>);\n})\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();
\n

testRenderer.toJSON()

\n
testRenderer.toJSON()
\n

Return an object representing the rendered tree. This tree only contains the platform-specific nodes like <div> or <View> and their props, but doesn’t contain any user-written components. This is handy for snapshot testing.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

Return an object representing the rendered tree. The representation is more detailed than the one provided by toJSON(), and includes the user-written components. You probably don’t need this method unless you’re writing your own assertion library on top of the test renderer.

\n

testRenderer.update()

\n
testRenderer.update(element)
\n

Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.

\n

testRenderer.unmount()

\n
testRenderer.unmount()
\n

Unmount the in-memory tree, triggering the appropriate lifecycle events.

\n

testRenderer.getInstance()

\n
testRenderer.getInstance()
\n

Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don’t have instances.

\n

testRenderer.root

\n
testRenderer.root
\n

Returns the root “test instance” object that is useful for making assertions about specific nodes in the tree. You can use it to find other “test instances” deeper below.

\n

testInstance.find()

\n
testInstance.find(test)
\n

Find a single descendant test instance for which test(testInstance) returns true. If test(testInstance) does not return true for exactly one test instance, it will throw an error.

\n

testInstance.findByType()

\n
testInstance.findByType(type)
\n

Find a single descendant test instance with the provided type. If there is not exactly one test instance with the provided type, it will throw an error.

\n

testInstance.findByProps()

\n
testInstance.findByProps(props)
\n

Find a single descendant test instance with the provided props. If there is not exactly one test instance with the provided props, it will throw an error.

\n

testInstance.findAll()

\n
testInstance.findAll(test)
\n

Find all descendant test instances for which test(testInstance) returns true.

\n

testInstance.findAllByType()

\n
testInstance.findAllByType(type)
\n

Find all descendant test instances with the provided type.

\n

testInstance.findAllByProps()

\n
testInstance.findAllByProps(props)
\n

Find all descendant test instances with the provided props.

\n

testInstance.instance

\n
testInstance.instance
\n

The component instance corresponding to this test instance. It is only available for class components, as function components don’t have instances. It matches the this value inside the given component.

\n

testInstance.type

\n
testInstance.type
\n

The component type corresponding to this test instance. For example, a <Button /> component has a type of Button.

\n

testInstance.props

\n
testInstance.props
\n

The props corresponding to this test instance. For example, a <Button size=\"small\" /> component has {size: 'small'} as props.

\n

testInstance.parent

\n
testInstance.parent
\n

The parent test instance of this test instance.

\n

testInstance.children

\n
testInstance.children
\n

The children test instances of this test instance.

\n

Ideas

\n

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

\n
import TestRenderer from 'react-test-renderer';\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.input = null;\n  }\n  componentDidMount() {\n    this.input.focus();\n  }\n  render() {\n    return <input type=\"text\" ref={el => this.input = el} />\n  }\n}\n\nlet focused = false;\nTestRenderer.create(\n  <MyComponent />,\n  {\n    createNodeMock: (element) => {\n      if (element.type === 'input') {\n        // mock a focus function\n        return {\n          focus: () => {\n            focused = true;\n          }\n        };\n      }\n      return null;\n    }\n  }\n);\nexpect(focused).toBe(true);
","frontmatter":{"title":"Test Renderer","next":null,"prev":null},"fields":{"path":"content/docs/reference-test-renderer.md","slug":"docs/test-renderer.html"}}},"pageContext":{"slug":"docs/test-renderer.html"}},"staticQueryHashes":[]}