You are passing an undefined module! Please check the object you are passing to i18next.use()

See original GitHub issue

🐛 Bug Report

I followed the usage example files i18n with jest. I created the mock file, included in moduleNameMapper, but when I go to test a component that uses i18n, I get this error: You are passing an undefined module! Please check the object you are passing to i18next.use()

Captura de Tela 2022-10-27 às 12 31 14

To Reproduce

/src/test/__mocks__/react-i18next.js:

const React = require('react');
const reactI18next = require('react-i18next');

const hasChildren = node => node && (node.children || (node.props && node.props.children));

const getChildren = node =>
  node && node.children ? node.children : node.props && node.props.children;

const renderNodes = reactNodes => {
  if (typeof reactNodes === 'string') {
    return reactNodes;
  }

  return Object.keys(reactNodes).map((key, i) => {
    const child = reactNodes[key];
    const isElement = React.isValidElement(child);

    if (typeof child === 'string') {
      return child;
    }
    if (hasChildren(child)) {
      const inner = renderNodes(getChildren(child));
      return React.cloneElement(child, { ...child.props, key: i }, inner);
    }
    if (typeof child === 'object' && !isElement) {
      return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
    }

    return child;
  });
};

const useMock = [k => k, {}];
useMock.t = k => k;
useMock.i18n = {};

module.exports = {
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  withTranslation: () => Component => props => <Component t={k => k} {...props} />,
  Trans: ({ children }) =>
    Array.isArray(children) ? renderNodes(children) : renderNodes([children]),
  Translation: ({ children }) => children(k => k, { i18n: {} }),
  useTranslation: () => useMock,

  // mock if needed
  I18nextProvider: reactI18next.I18nextProvider,
  initReactI18next: reactI18next.initReactI18next,
  setDefaults: reactI18next.setDefaults,
  getDefaults: reactI18next.getDefaults,
  setI18n: reactI18next.setI18n,
  getI18n: reactI18next.getI18n,
};

jest.config.js

moduleNameMapper: {
    'react-i18next': '<rootDir>/src/test/__mocks__/react-i18next.js',
  },

Your Environment

  • node: v16.14.2
  • i18next version: ^21.6.16
  • os: Mac
  • react: 18.1.0
  • next: 12.1.6

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
adraicommented, Oct 27, 2022

can you console.log initReactI18next

0reactions
adraicommented, Dec 16, 2022

@dashcraft like said, I was and am not able to reproduce that issue in my test setups… that’s why I ask for a minimal reproducible example… a small repository or similar. 🤷‍♂️

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error with i18n (Error: You are passing an undefined module ...
It seems to have been called reactI18nextModule in an earlier version of react-i18next which is why you can find tutorials using it.
Read more >
Error With I18N (Error: You Are Passing An ... - ADocLib
Please Check The Object You Are Passing To I18Next.Use()). The syntax for the nested i18n object comes from NextJs directly. Note: nextConfigDir should...
Read more >
Testing - react-i18next documentation
For testing purpose of your component you should export the pure component without ... In the test, test the myComponent export passing a...
Read more >
API - i18next documentation
You can create additional instances using the createInstance function. ... in the t function override the languages or namespaces by passing them in...
Read more >
Step by step guide - react-i18next documentation
We expect you to have an existing react application supporting hooks (at least ... The interesting part here is by i18n.use(initReactI18next) we pass...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found