title: How to pass the i18n translation object from react-i18next in react-testing-library in conjuction with Redux?
body: <p>I have an application that uses Redux and react-i18next for translating the string. I want to write a unit test that will interpolate the i18n object in a human-readable format so that I can test the string as 'Sign in with Google' instead of 'login.sign_in_with_google'. The application was bootstraped with "Create React App". The i18n interpolations work without any problems when the application is actually running. I have to use the <code>&lt;Suspense /&gt;</code> component, otherwise, it doesn't mount the component.</p>
  
  <p>The project tree:</p>
  
  <pre><code>├── public
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── locales
  │   │   └── en
  │   │       └── translation.json
  └── src
      ├── i18n
      │   └── i18n.js
  </code></pre>
  
  <p>Component sample:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Login = (props) =&gt; {
      const { t } = useTranslation();
  
      return (
          &lt;Button&gt;{t('login.sign_in_with_google')}&lt;/Button&gt;
      )
  }
  </code></pre>
  
  <p>Test sample:</p>
  
  <pre class="lang-js prettyprint-override"><code>test('Login with Google button is rendered', async () =&gt; {
      // Mount the component
      const { getByText } = render(
          &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
              &lt;I18nextProvider i18n={i18n}&gt;
                  &lt;Login {...props} /&gt;
              &lt;/I18nextProvider&gt;
          &lt;/Suspense&gt;,
      );
  
      expect(getByText(i18n.getDataByLanguage('en').login.sign_in_with_google)).toBeDefined();
      await waitFor(() =&gt; expect(screen.getByText(('Sign in with Google'))).toBeInTheDocument());
  });
  </code></pre>
  
  <p>What I'm getting here is that the component is mounted, but the button string is not interpolated as an i18n object. The bottom line is, <strong>I need to convert i18n keys into human-readable format</strong> so that I can test the component properly.</p>
  
  <p>translation.json file:</p>
  
  <pre><code>{
      "login": {
          "sign_in_with_google": "Sign in with Google",
      },
  }
  </code></pre>
  
  <p>When I try to log <code>i18n.getDataByLanguage('en')</code> it returns undefined.</p>