Skip to content

react-test-renderer findAllByProps returns duplicate results for RN components #16264

@TAGraves

Description

@TAGraves

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions