如何解决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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。