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

Question

Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

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

Answer 1

显示的错误非常非常错误。

在我的例子中，它缺少 <Trans> 的模拟。虽然我模拟了 react-i18next，但由于我有很多组件需要测试，其中一些正在使用 <Trans> 而另一些则没有，我 copy/paste 测试文件但完全忘记了检查模拟。在我将 <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)
}));

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

<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

jestjs

react-i18next