使用 Jest 测试 i18next 时如何修复 `TypeError: Cannot read property 'type' of undefined`答案

【问题标题】：How to fix `TypeError: Cannot read property 'type' of undefined` when testing i18next with Jest使用 Jest 测试 i18next 时如何修复 `TypeError: Cannot read property 'type' of undefined`
【发布时间】：2019-08-25 17:19:56
【问题描述】：

我有一个 react 项目，我已经包含了 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;
      }

我该如何解决这个问题？

【问题讨论】：

标签： typescript jestjs i18next react-i18next

【解决方案1】：

试试这个：

const reactI18nextModule = require("react-i18next");

而不是

import { initReactI18next } from "react-i18next";

在这里阅读更多关于 require vs import 的笑话测试：

Jest mocking default exports - require vs import

希望对你有帮助:)

【讨论】：

如何使用 require 导出 useTranslation？
我不明白这个问题？ :) 你问的是 es5 模块导出吗？ module.exports = foo;

【解决方案2】：

您很可能已遵循本指南： 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

【讨论】：

【解决方案3】：

你需要模拟initReactI18next。请尝试以下操作：

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

  return {
    useTranslation: () => useMock,
    initReactI18next: () => {}
  };
});

【讨论】：

【解决方案4】：

也许您将 V9 更新为 >=V10。因为reactI18nextModule 在>=V10 中不再可用。尝试改用initReactI18next。

【讨论】：

【解决方案5】：

失败的功能：

function use(module) {
      if (module.type === 'backend') { // cannot read `type` of `undefined`

结论：module 是undefined。它来自：

i18next.use(initReactI18next)

结论：initReactI18next 未定义。它来自：

import { initReactI18next } from "react-i18next";

结论：initReactI18next 不是从react-i18next 导出的东西

【讨论】：

initReactI18next 是从“react-i18next”导出的