react-i18next: [error/warning]: You will need pass in an i18next instance by using initReactI18next

For getting rid of Jest warnings easier than modifying components themselves:

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

Can someone explain where (which file) we need to write 👇

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

Do we need to have it within our test.js file or component.js file?

You can place it at the top of the file right after file imports and before the describe block

on the off chance that someone else runs into this, the error had nothing to do with i18next, and it was merely a faulty webpack setting.

In package.json we had:

"sideEffects": false

the issue got resolved by changing it into:

"sideEffects": [
    "./src/services/app/i18n.js"
  ]

In my case, the warning appeared during jest tests. For the time being, I’ve gotten around it by redefining t if in a test:

const { t } = jest ? {t:s=>s} : useTranslation();

Can someone explain where (which file) we need to write 👇

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

Do we need to have it within our test.js file or component.js file?

can’t remember where I found this but it works really nice src/__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,
};

sometimes it helps to talk about the issue - or in the worst case some distance to the problem and solutions come up

create a src/setupTests.ts with the following:

import '@testing-library/jest-dom';

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ t: (key: string) => key }),
}));

@DevScissors where do you import the i18n.js?!?

The implementation is not:

Get i18n from useTranslation and pass it to the I18nextProvider. The I18nextProvider would get it from the import and would be the most outer Element (before getting t, i18n from useTranslation). The Provider is only needed if not calling .use(initReactI18next).

import { hot } from 'react-hot-loader/root';
import React from 'react';
import './style.less';
import { useTranslation, Trans } from 'react-i18next';
import ComponentUseTranslation from '../tests/UseTranslation';

// import it
import `./i18n.js`

const App = () => {
    const { t, i18n } = jest ? { t: (s) => s } : useTranslation();
    return (
        // nono: <I18nextProvider i18n={i18n}>
            <div className="App">
                <div className="App-header">
                    <h2>{t('welcome')}</h2>
                    <button onClick={() => i18n.changeLanguage('uk')}>uk</button>
                    <button onClick={() => i18n.changeLanguage('en')}>en</button>
                </div>
                <div className="App-intro">
                    <Trans i18nKey="get-started">trans</Trans>
                </div>
                <div style={{ marginTop: 40 }}>
                    Learn more:&nbsp;
                    <a href="https://react.i18next.com">https://react.i18next.js</a>
                </div>
                <ComponentUseTranslation />
            </div>
        // </I18nextProvider>
    );
};

export default hot(App);

I am still getting a warning about i18nextReactModule in my App.test.js. I had more errors but researched and found this thread and added I18nextProvider to fix a few of them. Below are the files I am working with. Any help would be appreciated.

i18n.js

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import usLocale from '../public/locales/en/en-us';
import ukLocale from '../public/locales/uk/en-uk';

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        // we init with resources
        resources: {
            en: usLocale,
            uk: ukLocale,
        },
        fallbackLng: 'en',
        // have a common namespace used around the full app
        ns: ['translations'],
        defaultNS: 'translations',
        interpolation: {
            escapeValue: false // not needed for react as it escapes by default
        }
    });


export default i18n;`

App.js

import { hot } from 'react-hot-loader/root';
import React from 'react';
import './style.less';
import { useTranslation, Trans, I18nextProvider } from 'react-i18next';
import ComponentUseTranslation from '../tests/UseTranslation';

const App = () => {
    const { t, i18n } = jest ? { t: (s) => s } : useTranslation();
    return (
        <I18nextProvider i18n={i18n}>
            <div className="App">
                <div className="App-header">
                    <h2>{t('welcome')}</h2>
                    <button onClick={() => i18n.changeLanguage('uk')}>uk</button>
                    <button onClick={() => i18n.changeLanguage('en')}>en</button>
                </div>
                <div className="App-intro">
                    <Trans i18nKey="get-started">trans</Trans>
                </div>
                <div style={{ marginTop: 40 }}>
                    Learn more:&nbsp;
                    <a href="https://react.i18next.com">https://react.i18next.js</a>
                </div>
                <ComponentUseTranslation />
            </div>
        </I18nextProvider>
    );
};

export default hot(App);

App.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/App';

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
    ReactDOM.unmountComponentAtNode(div);
});

UseTranslation.js

import React from 'react';
import { useTranslation, I18nextProvider } from 'react-i18next';

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const CustomComponent = () => {
    const { t, i18n } = jest ? { t: (s) => s } : useTranslation();

    return (
        <I18nextProvider i18n={i18n}>
            <div>{t('welcome')}</div>
        </I18nextProvider>
    );
};

export default CustomComponent;

UseTranslation.test.js

import React from 'react';
import App from './UseTranslation';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

it('test render', () => {
    const mounted = mount(<App />);
    expect(mounted.contains(<div>welcome</div>)).toBe(true);
});

@VisheshSingh @rogger-frogger

jest allows to define a set of setup files to handle this kind of stuff

• https://jestjs.io/docs/en/configuration#setupfiles-array

In create-react-app this file is called setupTests.js

beforeEach(() => {
  jest.mock('react-i18next', () => ({
    useTranslation: () => ({ t: (key: string) => key })
  }));
});

For getting rid of Jest warnings easier than modifying components themselves:

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

For those who use Trans component, it makes sense to mock it as well:

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ t: key => key }),
  Trans: ({ children }) => children
}));

Otherwise there will be an error of “Invariant Violation: Element type is invalid”.

Maybe i’m overlooking something here, but for me the fix was a mere one-liner. Simply added

  setupFiles: ['web/src/i18n'],

to the config-array into web/jest.config.js and the warning went away. (web/src/i18n.js is the init-script also used in App.tsx)

Of course, one could define a separate file initialization script specifically for the test environment and/or write a hook-mock to be executed before each test. The latter would then be configured to be made available to every test with setupFilesAfterEnv i guess.

Unfortunately it didn’t bring me much further, I am starting to wonder if webpack is just ignoring the whole services/app/i18n.js file.

I placed a console.log in the services/app/i18n.js file above the init call, and a log in the parse: transformTranslationsData, function. When running on the server:

The error still shows, despite adding initImmediate : false to the init options And the tReady prop is true right away, Neither log gets called. Checking the heroku api logs, the translations api call is never made.

If I run it locally, tReady is first undefined, then I see the parse function called, and the tReady is true. And the translation are there.

edit I don’t know why I am telling you all this 😄, I’ll close the issue, thanks for your time

Thanks for the example @FDiskas.

can’t remember where I found this but it works really nice src/mocks/react-i18next.js

It’s from here https://github.com/i18next/react-i18next/blob/7cfab9746b3ccc6f833cd9c892e7c3c804944a5e/example/test-jest/src/__mocks__/react-i18next.js.

For getting rid of Jest warnings easier than modifying components themselves:

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: key => key})
}));

Extending it for the case of handling objects:

const { t } = useTranslation();
const translations = t('my.key', { returnObjects: true });
translations.message.replace('{hash}', 'value');

It’d be:

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key) => ({
      message: key
    })
  })
}));