Unexpected behavior for <Text /> element

In React Native it is okay to pass a number as a child for a <Text /> element. So

<Text>2<Text />

is the same as

<Text>{"2"}<Text />

or

<Text>2.toString()<Text />

But since getByText only accepts a string as it’s input, you can’t find the element if it’s being rendered in the first way.

This took me quite some time to debug and I think it’s very counter-intuitive. Maybe there is a good solution so getByText finds everything rendered between <Text /> tags?

[janhesters]

~~I tried that way, too ~~

const amountRegex = new RegExp(props.amount.toString());
expect(getByText(amountRegex)).toBeDefined();

and still the component isn’t found.

I’m sorry, I’m dumb, this works. Thank you a lot!

If someone in the future sees that: If you have a prop named amount make sure to use it like this:

<Text>{this.props.amount}</ Text>

instead of this:

<Text>this.props.amount</ Text>

Otherwise the regex above will not find it 😄

[thymikee]

Awesome you made it!