Issue where react native fails to render with crash and render has no error

[hannojg]

Describe the bug

When rendering code conditionally in react-native you can run into a "Text strings must be rendered within a component." error.
Example, which will cause react native app to crash/fail:

  const text = 0;

  return (
    <View style={styles.container}>
      {text && <Text>{text}</Text>}

When rendering such a component with render it will succeed.

Expected behaviour

Expected some form of a crash during rendering too. Instead, the component seems to be rendered successfully.

Steps to Reproduce

I created a reproduction using expo: https://github.com/hannojg/react-native-testing-library-issue
Interestingly it seems that the component can be rendered on the web. However, when you test with expo on iOS/android you will see that the App component can't be rendered.
When you run yarn test you will see that the test using this library succeeds.

Versions

npmPackages:
@testing-library/react-native: ^7.0.2 => 7.0.2
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz => 0.63.2

Note: This happens also with bare react native.

[MattAgn]

I think the issue lies in the fact that the render method of react-native-testing-library uses react-test-renderer to render its components and not the react native render method.
I think the "Text strings" error you're talking about is due to the native text elements and since react-test-renderer cannot render native elements, it won't throw their related errors (such as this one)

[tom-sherman]

I think it would be great if this error could be emulated in RNTL, would it involve modifying react-test-renderer or could it be done in RNTL?

You can do it in user-space right now by inspecting the children of the returned react nodes but that is very fragile to component changes. An example below of a test in our codebase:

function Component({ count }) {
  return (
    <View testID="someTestId">
      {count && <Text>{count}</Text>}
    </View>
  );
}

it('should not render a 0 when passed count=0', () => {
  const { getByTestId } = render(
    <Component count={0} />
  );

  // Use getByTestId to make sure we're asserting on the correct children
  expect(getByTestId('someTestId').children).not.toContain('0');
});

Again, this is fragile because if the offending child is ever wrapped in another element, causing it not to be a direct child of "someTestId" then the test will pass when it should fail.

[isakstarlander]

Hey! I'm happy I found this thread, I just ran into this issue myself. So, we used a conditional check before rendering, and the result was an empty string that ended up in a plain View, we updated it to a ternary instead, to avoid the crashing, but wanted to make a test for it to prevent it from happening again in the future. That's when I realised the tests passed independently.

As aforementioned speaker @tom-sherman mentions, this can be validated by looking through the children of the rendered component tree, but rather than this having to be maintained by every individual user of the testing library, it would be really sweet to have that solution handled within the library itself, seeing as it probably should account for how React Native itself is behaving? Anyhow, we hope to avoid this issue ourselves by sharing insights within the team, but I vote +1 for fixing this sometime soon. Would be much appreciated! 🙇

[mdjastrzebski]

Closing in favour of feature request #1032