react-native-testing-library how to getByText when using react-intl FromattedMessage?

Question

getByText method by react-native-testing-library doesn't seem to find text when it's inside react-intl's <FormatedMessage />

const messages = {
   SOME_KEY: 'some key'
}

const { getByText } = render(
   <IntlProvider key={'en'} locale={'en'} messages={messages}>
     <Text>
        <FormattedMessage id={'SOME_KEY'} />
     </Text>
   </IntlProvider>
)

  expect(getByText('some key'));

getByText returns null in this case.

Answer 1

So I tried fixing it and creating a PR but with no success as of yet, anyway, I'v found a workaround. When you test your component with RTL you probably wrap your component with an intl-provider. Something like that:

const { getByText } = render(<IntlProvider><MyComponent /> </IntlProvider>

So what fixes the issue for me and allowing me to use getByText is turning this to:

import { Text } from 'react-native';

const { getByText } = render(<IntlProvider textComponent={Text}><MyComponent /> </IntlProvider>

Adding textComponent={Text} forces the FormattedMessage component to use Text as a wrapper instead of React.Fragment which is the default.