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()
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:
- Created a year ago
- Comments:18 (9 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
can you console.log initReactI18next
@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. 🤷♂️