react-native-testing-library 在使用 react-intl FromattedMessage 时如何 getByText？

问题描述

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。

解决方法

所以我尝试修复它并创建一个 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。

react-native react-native react-native-testing-library testing-library