queryByLabelText not working for custom components

[piotrponikowski]

I am trying to figure out why this test works:

test('test 1', () => {
  const { queryByLabelText, debug } = render(
    <View accessibilityLabel={'parent'}>
      <Text>One</Text>
      <View>
        <Text>Two</Text>
        <Text>Three</Text>
      </View>
    </View>
  );

  debug();
  expect(queryByLabelText('parent')).toHaveTextContent('OneTwoThree');
});

but after moving part of hierarchy to separate component it stopped to pass:

test('test 2', () => {
  const { queryByLabelText, debug } = render(
    <View accessibilityLabel={'parent'}>
      <Text>One</Text>
      <TestComponent />
    </View>
  );

  debug();
  expect(queryByLabelText('parent')).toHaveTextContent('OneTwoThree');
});

const TestComponent = () => {
  return (
    <View>
      <Text>Two</Text>
      <Text>Three</Text>
    </View>
  );
};

Error for 2nd test:

  Expected element to have text content:
    OneTwoThree
  Received:
    One

Both tests have the same snapshot printed by debug method:

    <View
      accessibilityLabel="parent"
    >
      <Text>
        One
      </Text>
      <View>
        <Text>
          Two
        </Text>
        <Text>
          Three
        </Text>
      </View>
    </View>

Is it intentional behavior?

Tested with:

• @testing-library/jest-native: 4.0.1
• @testing-library/react-native: 8.0.0-rc.1

[mdjastrzebski]

@piotrponikowski Closing the issue as fixed as I have run your examples under latest RNTL and JN, and both tests pass.