Error: Unable to find an element with text: "My text", while that text exist.

Describe the bug

getByText can find element if text render component with text as not children (See “Steps to Reproduce” below)

-const Trans = p => p.i18nKey; // can find (error)
+const Trans = p => p.children; // everything ok

Expected behavior

I see in debug output (see screenshot below) that text exists! But API can find it( It should work properly!

Steps to Reproduce

    test('test',  () => {
      const { Text } = require('react-native');
      const { render } = require('@testing-library/react-native');
      const Trans = p => p.i18nKey;

      const screen = render(
        <Text>
          <Trans i18nKey="My text" />
        </Text>,
      );

      screen.debug();

      expect(screen.getByText('My text')); // Error: Unable to find an element with text: My text
    });

Screenshots

Output:

Versions

  npmPackages:
    @testing-library/react-native: ^7.2.0 => 7.2.0 
    react: 17.0.2 => 16.13.1 
    react-native: 0.66.4 => 0.66.4 
    react-test-renderer: 17.0.2 => 17.0.2 

[pierrezimmermannbam]

Not sure this is easy to fix, the type of <Trans i18nKey=“text”/> isn’t string so the getChildrenAsText method is looking for strings in its children but it doesn’t have any. For this to work it would require to be able to tell that it renders as a string but i’m not sure it’s easily doable.

@retyui this can be fixed on your end by mocking the Trans component like this

jest.mock('./Trans', () => {
  const { Text } = require('react-native');

  return {
    Trans: (props) => {
      return <Text>{props.i18nKey}</Text>;
    },
  };
});

However if there is an effective way to fix this it would be very nice, or maybe it could be documented somewhere

[mdjastrzebski]

@pierrezimmermannbam I refactored back into toJSON method on ReactTestInstance and I’ve submitted PR: https://github.com/facebook/react/pull/25329

Let’s see how the review goes…