-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Description
Reproducible Example: https://github.com/TAGraves/react-test-renderer-bug-example (just yarn install
then yarn test
.
Using:
react => 16.0.0
react-native => 0.49.3
react-test-renderer => 16.0.0
I'm trying to use some of the new utilities provided by react-test-renderer
to make assertions against a RN component hierarchy, but unfortunately the way RN mocks components when using Jest makes this a futile attempt. findAllByProps
is returning twice as many elements as it should. I've attached a super simple example at the top (rendering just a single <View />
but getting two results from findAllByProps).
The issue stems from mockComponent.js. When it mocks a component out, its render returns another component with the same name and props. So if your intended hierarchy looks like:
<View testID="a">
<SomeComponent />
</View>
the outputted hierarchy will be:
<View testID="a">
<View testID="a">
<SomeComponent />
</View>
</View>
I believe this can be fixed by changing the mocked implementation just to:
const Component = class extends RealComponent {
render() {
return this.props.children || null;
}
};
and I am happy to submit a PR with this change, but would like some guidance on if there's a reason for the existing approach before I go changing things.
Thank you!