0

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 を返します。

4

1 に答える 1

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 コンポーネントは、デフォルトの React.Fragment ではなく Text をラッパーとして使用するようになります。

于 2021-04-07T18:46:21.780 に答える