web-dev-qa-db-ja.com

Jestでi18nextをテストするとき、 `TypeError:プロパティ 'type' of undefined`を読み取れません

反応プロジェクトがあり、i18next = 15.0.4およびreact-i18next = 10.2.0の依存関係を含めました。 react-i18nextでi18nextを初期化するためのモジュールを作成しました。Jestを使用してこのコードを単体テストしようとしています。

I18nextを初期化するi18nモジュールをインポートし、jestを使用して単体テストを試みました。

これがi18n.tsの私のモジュールです

import i18next from "i18next";
import { initReactI18next } from "react-i18next";

const config = {
    resources: {
        en: {
            static: {},
        },
    },
    fallbackLng: "en",
    defaultNS: "static",
    ns: "static",
    interpolation: {
        prefix: "[",
        suffix: "]",
    },
};

i18next.use(initReactI18next).init(config);

export default i18next;

そして、私は次のようなテストコードからそれを呼び出そうとしています(i18n.test.ts):

import i18n from "./i18n";

describe("i18n", () => {

    it("should work fine", () => {
        const strings = {
            key: "value",
        };
        i18n.addResourceBundle("en", "static", strings, true, true);
    });
});

このテストに合格すると思いますが、代わりに次のエラーが発生します。

TypeError: Cannot read property 'type' of undefined
      at I18n.use (node_modules/i18next/dist/commonjs/i18next.js:257:18)

これは基本的に、i18next.jsのこのコードを指します

    value: function use(module) {
      if (module.type === 'backend') {
        this.modules.backend = module;
      }

この問題を解決するにはどうすればよいですか?

4
Jesus

ほとんどの場合、このガイドに従ってください: https://react.i18next.com/misc/testing

このモックを使うべきだと言っています:

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  withTranslation: () => Component => {
    Component.defaultProps = { ...Component.defaultProps, t: () => "" };
    return Component;
  },
}));

しかし、これを行う場合、ここで使用しようとしているinitReactI18nextはありません。

import { initReactI18next } from "react-i18next";
i18next.use(initReactI18next).init(config);

ドキュメントはあなたを妨害します:(

必要なのは、スタブを削除するか、スタブモジュールでinitReactI18nextキーを提供することです。

私はここで著者に通知しました: https://github.com/i18next/react-i18next-gitbook/pull/42

0
Vanuan

あなたはモックする必要がありますinitReactI18next。以下を試してください:

jest.mock('react-i18next', () => {
  const useMock = [k => k, {}];
  useMock.t = k => k;

  return {
    useTranslation: () => useMock,
    initReactI18next: () => {}
  };
});
0
t-reksio

<= V9から> = V10に更新した可能性があります。 reactI18nextModuleは、> = V10では利用できなくなったためです。代わりにinitReactI18nextを使用してください。

詳細については https://react.i18next.com/latest/migrating-v9-to-v1 にアクセスしてください

0
Kevin