Proposals for the ReactTestRenderer API

[josephsavona]

Do you want to request a feature or report a bug?
New feature

What is the current behavior?
ReactTestRenderer returns an "instance", but this primarily seems to support two things: getting a representation of the "rendered" output and calling methods on the instance (via instance.getInstance().componentMethod()).

What is the expected behavior?
This is good for testing regular UI components, but testing infra-level components (HOCs) often requires testing lifecycle hooks. I've found that I need the ability to re-render the component with new props (test componentWillReceiveProps, shouldComponentUpdate, etc) and unmount the component altogether (test componentWillUnmount).

Changing props can be accomplished via a helper (I'm using the following to work around this issue):

class PropsSetter extends React.Component {
 constructor() {
 super();
 this.state = {
 active: true,
 props: null,
 };
 }
 setProps(props) {
 this.setState({props});
 }
 unmount() {
 this.setState({active: false});
 }
 render() {
 if (!this.state.active) {
 return <div />;
 }
 const child = React.Children.only(this.props.children);
 if (this.state.props) {
 return React.cloneElement(child, this.state.props);
 }
 return child;
 }
 }

const inst = ReactTestRenderer.create(
 <PropsSetter>
 <ComponentToTest ... />
 </PropsSetter>
);
inst.getInstance().setProps({...});

This works for updating props, but calling PropsSetter#unmount() fails with ReactComponentEnvironment.replaceNodeWithMarkup is not a function (appears that replacing the component with the dummy <div /> is failing).

Preferably the API would support both of these directly:

const inst = ReactTestRenderer.create(<ComponentToTest ... />);
inst.render(props); // updates with new props
inst.ummount(); // unmounts component

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is a new API only on master (to my knowledge).

[sophiebits]

This works for updating props, but calling PropsSetter#unmount() fails with ReactComponentEnvironment.replaceNodeWithMarkup is not a function (appears that replacing the component with the dummy <div /> is failing).

As a temporary workaround, alternating between <div /> and <div>{this.props.children}</div> (essentially, adding an extra wrapping div) might fix this error.

[sophiebits]

Going to use this issue to track other bugs/improvements:

@cpojer said that when replacing the Image.js mock in react/react-native@7c53add with module.exports = 'Image';, this error was thrown:

TypeError: component.getPublicInstance is not a function on ReactCompositeComponentMixin.attachRef (node_modules/react/lib/ReactCompositeComponent.js:823:45)

Pretty sure that should work (and if not, give a better error message).

[josephsavona]

As a temporary workaround, alternating between

and

{this.props.children}

...

No luck, got this error instead: ReactComponentEnvironment.processChildrenUpdates is not a function. I'm working around this for now with instance.getInstance().componentWillUnmount() ;-)

[sebmarkbage]

It would be nice to be able to traverse the tree.

TestComponent::getChildren() => Array<TestComponent>

TestComponent::getType() : (typeof ReactComponent) | ReactStatelessFunction | string

TestComponent::getInstance() : ReactComponent | null

TestComponent::getProps() : Object

TestComponent::toJSON() : Same as before

[ryanseddon]

Currently trying to use this with jest snapshot testing but if a component contains a ref or makes a call to ReactDOM.findDOMNode it fails.

Component

import React from 'react';

export default class Link extends React.Component {
 render() {
 return (
 <a
 ref={a => this._a = a}
 href={this.props.page || '#'}>
 {this.props.children}
 </a>
 );
 }
}

Test

'use strict'

import React from 'react';
import Link from '../Link';
import renderer from 'react/lib/ReactTestRenderer';

describe('Link', () => {
 it('renders correctly', () => {
 const tree = renderer.create(
 <Link page="foo" />
 ).toJSON();

 expect(tree).toMatchSnapshot();
 });
});

stack trace

 FAIL __tests__/Link-test.js (2.148s)
● Link › it renders correctly
 - TypeError: component.getPublicInstance is not a function
 at attachRef (node_modules/react/lib/ReactRef.js:20:19)
 at Object.ReactRef.attachRefs (node_modules/react/lib/ReactRef.js:42:5)
 at attachRefs (node_modules/react/lib/ReactReconciler.js:26:12)
 at CallbackQueue._assign.notifyAll (node_modules/react/lib/CallbackQueue.js:67:22)
 at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (node_modules/react/lib/ReactTestReconcileTransaction.js:37:26)
 at ReactTestReconcileTransaction.Mixin.closeAll (node_modules/react/lib/Transaction.js:204:25)
 at ReactTestReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:151:16)
 at batchedMountComponentIntoNode (node_modules/react/lib/ReactTestMount.js:61:27)
 at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
 at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)

[zpao]

@ryanseddon Can you file a new issue for your specific problem, this issue is about tracking other APIs.

[ryanseddon]

apologies, done #7371