Allow for text to match children who are composed as array

[eliperkins]

Summary

Given a component that renders text by composing together literal text with an inline expression for a dynamic variable, React Native will render this as a <Text> element with multiple children. For example:

const BananaCounter = ({ numBananas }) => (
  <Text>There are {numBananas} bananas in the bunch</Text>
);

const { toJSON, debug } = render(<BananaCounter numBananas={3} />);

debug();
/*
      <Text>
        There are
        3
         bananas in the bunch
      </Text>
*/

expect(toJSON()).toMatchInlineSnapshot(`
<Text>
  There are 
  3
   bananas in the bunch
</Text>
`);

This makes sense, as the component is a:

• literal string
• a dynamic evaluation
• literal string

Unfortunately, this means that writing a test that finds an element based on that dynamic evaluation fails when using getByText.

const { getByText } = render(<BananaCounter numBananas={3} />);
expect(getByText('There are 3 bananas in the bunch')).toBeTruthy(); // Fails

This is because we compare the given test string directly against children.

react-native-testing-library/src/helpers/getByAPI.js

Lines 23 to 24 in ce3bf28

	? text === node.props.children
	: text.test(node.props.children))

This results in comparing 'There are 3 bananas in the bunch' === ['There are ' 3, ' bananas in the bunch'], which of course will fail.

The solution is to join children and compare the joined result against the given text string.

Test plan

A test for this new functionality is provided!

[thymikee]

Yay!

[Esemesek]

@eliperkins I think we should also mention this behavior in the documentation. Can you also make changes there?

[eliperkins]

Thanks y'all! 🎊

[Esemesek]

Thank you too ❤️ ❤️ ❤️

[thymikee]

Available in 1.6.1, thank you :)