<Trans> 的玩笑错误：您忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入答案

【问题标题】：Jest error with <Trans>: You forgot to export your component from the file it's defined in, or you might have mixed up default and named imports<Trans> 的玩笑错误：您忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入
【发布时间】：2020-12-31 13:32:20
【问题描述】：

错误：未捕获 [错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认和命名导入。

这是我在开玩笑地运行测试时遇到的错误。正在测试的 React 组件使用来自react-i18next 的<Trans>。当我评论那部分代码时，测试按预期工作。

【问题讨论】：

标签： jestjs react-i18next

【解决方案1】：

显示的错误是非常非常非常错过领先。

在我的情况下，它缺少 <Trans> 的模拟。虽然我对react-i18next 进行了模拟，但由于我有许多组件要覆盖测试，其中一些正在使用<Trans> 而其中一些没有，我复制/粘贴测试文件但完全忘记检查模拟。在我将 <Trans> 从 material-ui 替换为 <Typography> 之类的文本之后，我花了几个小时才注意到它......

jest.mock('react-i18next', () => ({
  withTranslation: () => (Component: any) => {
    Component.defaultProps = {...Component.defaultProps, t: (children: any) => children};
    return Component;
  },
  Trans: ({children}: any) => children, // this line was missing (() => jest.fn() might also work)
}));

希望它能为你们中的一些人节省一些时间:)

【讨论】：

不要模拟你不拥有的东西——你最终会得到一个越来越复杂的 react-i18next` 模拟，然后如果他们的 API 发生变化，你的代码会中断，但你的测试会继续通过。
您是在建议我从他们的包中使用 API 进行模拟？不知道有类似的东西。这种做法适用于 React 组件中使用的大多数其他 npm 包吗？
不知道有没有；我的意思是更多地测试整体行为，在这种情况下，大概是您正在测试的任何组件都会显示一些翻译的文本。
我不确定我是否关注你。在我们的组件中，我们使用 withTranslation HoC 来注入命名空间，并通过 WithTranslation 将 t Function 作为 props 注入。我认为如果我们不模拟包，我们会遇到测试问题。