jestjs - 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

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.

This is the error I was getting while running test in jest. React component which is being tested uses <Trans> from react-i18next. When I comment that portion of code, test were working as expected.

Answer 1

The error shown is very very very miss leading.

In my case it was missing mock for <Trans>. While I had mock for react-i18next, but since I had many components to cover with tests, and some of them were using <Trans> and some of them not, I copy/paste test files but totally forgot to check about mock. It took me few hours to notice it, after I replaced <Trans> to text like <Typography> from material-ui...

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

Hope it will save some time for some of you :)