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

user_8416201 0
Viewed 1645

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.

react-i18next jestjs
1 Answers

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: (children: any) => children};
    return Component;
  },
  Trans: ({children}: any) => children, // this line was missing (() => jest.fn() might also work)
}));

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

user_84162010
Related