web-dev-qa-db-ja.com

React-Testing-LibraryとJestを使用して行われた単体テストでReact-i18nの翻訳ファイルを使用する方法はどうすればよいですか。

私はReactで行われた私のフロントエンドアプリケーションのためのJESTおよびReact-Testing-Libraryを使用して単体テストを作成しています。 React-I18 Next -Libraryを使用して国際化を追加する前に、私の単体テストがうまく機能しました。これでテストを実行すると、翻訳ファイルと何かを読む場所が空のままにされている場所が見つかりません。私はフックで最新のReactバージョンを使って、ReactOk.Componentの代わりに私はこの種の "const-components"を使っています：

    const ComponentName = ({t}) => {
        return(
          <p>{t('example')}</p>
        )}
      export default ComponentName;
 _

国際化は実際のページで完璧に機能しますが、翻訳ファイルを使用しないため、単体テストが失敗するため、問題は翻訳ファイルを正しくモックにしていると思います。私は、これまでのものを使用して古い反応のためのいくつかの提案ソリューションを見つけるだけです。ただし私を助けないソリューションのものはありません。

私はそれをjest.fn（）で嘲笑しようとしましたが、私はどちらの関数がどちらの関数であるかはわかりません。

    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', () => {
      const mockUseTranslation = jest.fn();

      const { t, i18n } = mockUseTranslation();

      // const t = jest.fn();
      const c = render(<ComponentName t={t} />);
      expect(c.getByText('Translation File Title')).toBeDefined();
      expect(
        c.getAllByText(
          'Lorem ipsum'
        ).length
      ).toBe(3);
    });
 _

エラーメッセージ：テキストで要素を見つけることができません：translation file title。これは、テキストが複数の要素によって分割されているためです。この場合、テキストのマッチャーの機能を提供して、マッチャーをより柔軟にすることができます。

そのため、特定のテキストを含むべき場所は完全に空の場所です。

reactjsjestjsinternationalizationreact-testing-libraryi18next
11
Sonja Laurila

たとえば、翻訳をモックしてはいけません。代わりに、翻訳ライブラリを上位コンポーネントとしてコンポーネントをレンダリングします。

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', () => {
    const c = render(
      <I18nextProvider i18n={i18n}> // actually give translation to your component
         <ComponentName />
      </I18nextProvider>
    );
    // example if you have a key called example
    expect(c.getByText(i18n.getDataByLanguage('en').translation.example)).toBeDefined(); 
});
 _

I18n.getDatabylanguage（ 'en'）で翻訳テキストを呼び出す代わりに、それがフランス語でI18n.getDatabylangangangangance（ 'fr'）でそれを呼び出すならば、あなたはあなたのプロジェクトの既定の翻訳を与えることができます。

また、このようなコンポーネントを変更してください。プロップからのユーザ輸送フックを取って代わりに、フック付きのコンポーネントの内側に入ってください。

componentName.jsx

import { useTranslation } from 'react-i18next'

const ComponentName = () => {
  const { t } = useTranslation()

  return(
    <p>{t('example')}</p>
  )}

export default ComponentName;
 _
1
onuriltan