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 facebook/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