Bug: `Found multiple elements with text`

Describe the bug

It seems that in a certain case the library will find more than one matching element with getByText. See the reproduction.

Expected behavior

Should find just one element.

Steps to Reproduce

function TestText({ children }) {
  return <Text>{children}</Text>;
}

function TestComponent() {
  return (
    <TestText>
      <TestText>Foo</TestText>
    </TestText>
  );
}

test('shows bug', () => {
  const component = render(<TestComponent />);
  component.getByText('Foo'); // Found multiple elements with text: Foo
});

function TestComponent2() {
  return (
    <Text>
      <Text>Foo</Text>
    </Text>
  );
}

test('works properly', () => {
  const component = render(<TestComponent2 />);
  component.getByText('Foo'); // OK
});

debug shows:

<Text>
  <Text>
    Foo
  </Text>
</Text>

Note that if TestText is replaced with just Text, so that it is used directly, the error goes away.

Versions

npmPackages: @testing-library/react-native: ^7.2.0 => 7.2.0 react: 17.0.1 => 17.0.1 react-native: 0.64.1 => 0.64.1 react-test-renderer: 17.0.1 => 17.0.1

[milesj]

That’s unfortunate… If it’s breaking, I don’t see why it couldn’t be included in 8 😓

[prometheas]

Bumping this with a comment to get maintainer attention, as this is one of several issues I’m running into with my component tests after upgrading my React Native from 0.63.4 to 0.64.2.