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.

Deemphasize

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: (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 :)

Deemphasize

Don't mock what you don't own - you'll end up with a more and more complicated mock for react-i18next`, then if their API changes your code will break but your tests will continue to pass. – Marlanamarlane

you are suggesting I shall utilize API for mock from their package? Didn't know there is something like it. Is that practice for most other npm packages which are used in React components? – Deemphasize

I don't know if they have one; my point was more to test the overall behaviour, in this case presumably that some translated text is displayed by whatever component you were testing. – Marlanamarlane

i am not sure i follow you. In our component we use withTranslation HoC to inject namespace and we inject t Function as props via WithTranslation.I think if we don't mock the package we have problems with tests. – Deemphasize

I think you have the right idea here. Reason being that the react-i18next library expects you to create your own mocks. The part about mocking Trans is missing in their documentation, but something similar is there for useTranslation/withTranslation. react.i18next.com/misc/testing – Hosiery

The ideal would be to return the key (i18nKey) and not the children. – Semivitreous

Answer 2

I faced the same issue, in order to resolve the issue I mocked the Trans component like this

  jest.mock("react-i18next", () => ({
       Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
  }));

Instead of passing the node, we can simply pass the i18nKey. In my case, I am only checking the key value. Hope it helps!

Alternative