当使用react-intl FromattedMessage时，如何使用getByText？

Question

当文本在react-intl的<FormatedMessage />中时，react-native-testing-library的getByText方法似乎找不到文本

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返回null。

Answer 1

所以我试着修复它并创建一个公关，但到目前为止还没有成功，总之，我找到了一个变通的办法。当您使用RTL测试您的组件时，您可能使用intl-provider包装您的组件。大概是这样的：

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

因此，为我解决这个问题并允许我使用getByText的方法是：

import { Text } from 'react-native';

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

添加textComponent={Text}会强制FormattedMessage组件使用文本作为包装器，而不是默认的React.Fragment。