title: How can I enable react-i18n translation file to be used in the unit tests done with react-testing-library and jest?
body: <p>I am making unit tests with jest and react-testing-library for my frontend application which is done with React. My unit tests worked nicely before I added the internationalization with react-i18next -library. Now when I run the tests, it seems that it doesn't find/use the translation files and all places where there should read something, are left empty. I'm using the newest react version with hooks and instead of React.Component I am using this kind of "const-components":</p>
  
  <pre><code>    const ComponentName = ({t}) =&gt; {
          return(
            &lt;p&gt;{t('example')}&lt;/p&gt;
          )}
        export default ComponentName;
  </code></pre>
  
  <p>The internationalization works perfectly in the actual page but just that the unit tests fail due to not using the translation-file so I think the problem is with correctly mocking the translation files. I am only finding some suggestion solutions for the older react using this.variableName -type of solutions, which however doesn't help me much.</p>
  
  <p>I have tried to mock it with jest.fn(), but I am not sure which function is the one, which I should mock and how to utilize the useTranslation() -function correctly from the tests.</p>
  
  <pre><code>    import React from 'react';
      import { useTranslation, Trans } from 'react-i18next';
      import { render } from '@testing-library/react';
      import ComponentName from './ComponentName';
  
      import '../locales/i18n';
  
      test('renders all documents in the list', () =&gt; {
        const mockUseTranslation = jest.fn();
  
        const { t, i18n } = mockUseTranslation();
  
        // const t = jest.fn();
        const c = render(&lt;ComponentName t={t} /&gt;);
        expect(c.getByText('Translation File Title')).toBeDefined();
        expect(
          c.getAllByText(
            'Lorem ipsum'
          ).length
        ).toBe(3);
      });
  </code></pre>
  
  <p>Error message: Unable to find an element with the text: Translation File Title. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.</p>
  
  <p>So in short: the place, which should contain certain text is now totally empty.</p>