How do I use getByText without it getting hung up on a <Image> inside the <Text>?

[Vannevelj]

I've got the following test:

import { Image, Text } from 'react-native';
import React from 'react';
import { render } from 'react-native-testing-library';

it('works', () => {
  render(<Text>Hello</Text>).getByText('Hello');
});

it('does not work', () => {
  render(
    <Text>
      <Image source={{}} />
      Hello
    </Text>
  ).getByText('Hello');
});

If I take out the <Image>, then it does find the text and the test passes. I've seen this issue which seems very much related but it sounds like this should have been fixed: callstack/react-native-testing-library#142

Am I using the API incorrectly?

• "react-native-testing-library": "^1.13.2",
• "react-test-renderer": "^16.13.1",
• "react": "16.9.0",
• "react-native": "0.61.5",
• "preset": "react-native",

[Vannevelj]

I've worked around this by putting both <Image> and <Text> on the same level in the view and adding flexDirection: row to the layout.

That looks the same visually and allows the tests to pass so I'm curious whether the issue here was a case of invalid nesting or whether there's a bug inside RNTL that doesn't correctly search these nested situations?

[Vannevelj]

If I change it to subject.getByText('[object Object]Hello'); then it does work. It looks like

https://github.com/callstack/react-native-testing-library/blob/360a53d5332d6290bd96686c20d43b794ed13161/src/helpers/getByAPI.js#L27

is perhaps not the right choice? I'm not really sure how the toString() is supposed to work on a component but I'm guessing that the current behaviour is not as intended.

[thymikee]

FYI, this repository is no longer responsible for this package. See the migration guide to v7.0.