react-native - react-native-testing-library 使用 react-intl FromattedMessage 时如何获取文本？

Question

react-native-testing-library 的 getByText 方法似乎在 react-intl 中找不到文本<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 返回 null。

Answer 1

所以我尝试修复它并创建一个 PR，但到目前为止还没有成功，无论如何，我找到了一种解决方法。当你用 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 组件使用 Text 作为包装器，而不是默认的 React.Fragment。