Description
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).
Activity