react-i18nをテストしたい

react-i18nを多言語化で使っていて、翻訳された結果の文字列をテストで確かめたかったのですが、key名しかテストではレンダリングされず、公式にも一応やり方は書いてあるのですが、分かりづらい上に動かなくて困っていました。

公式では...

公式docに記載の情報だとこうです。このjest.mockを使う方法が紹介されているのですが、またkey名しか表示されず...

index.test.js

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate hook can use it without a warning being shown
  useTranslation: () => {
    return {
      t: (str) => str,
      i18n: {
        changeLanguage: () => new Promise(() => {}),
      },
    };
  },
}));

で、参考にしたやり方がこちら。

index.test.js

import React from 'react';
import i18n from '../../../i18n' // your i18n config file
import { render } from '@testing-library/react';
import ComponentName from './ComponentName';
import { I18nextProvider } from 'react-i18next'

test('renders all documents in the list', () => {
    render(
      <I18nextProvider i18n={i18n}> 
         <ComponentName />
      </I18nextProvider>
    );
    expect(screen.getByTestId('testId').getByText('ほげふげ')).toBeTruthy(); 
});

参考記事