'React Testing Library - i18n translations not working

I'm trying to test a component, here's the component, simplified:

const Block = () => {
   const { t } = useTranslation();
  
   return <p data-testid="text">{t('some.text')}</p>;
}

Then I have this test:

test('That the text is correct', () => {
  const wrapper = render(
    <I18nextProvider i18n={i18n}>
      <Block />
    </I18nextProvider>
  );

  expect(wrapper.getByTestId('text')).toHaveTextContent('Hello!');
});

The i18n is my config file, which looks like this:

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    lng: 'en'
    debug: false,
    react: {
      useSuspense: false,
    },
    interpolation: {
      escapeValue: false,
    },
  });

But I'm still getting:

Expect element to have text content:
   Hello!
Received:
   some.text

My suspicion is that the Backend plugin is what's making it not work.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source