React-i18next: "i18n.languages were undefined or empty undefined" warning when using Jest & Enzyme

[nicholasmaddren]

Describe the bug
I am using the i18next guide for testing without stubbing: https://react.i18next.com/misc/testing#testing-without-stubbing

I have an i18n.ts file that initialises i18next like so:

// tslint:disable-next-line:no-var-requires
const en = require('../../../public/locales/en/translation.json');

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

i18next.use(initReactI18next).init({
  fallbackLng: 'en',
  debug: true,
  resources: {
    en: {
      translation: en,
    },
  },
});

export const initI18next = i18next;

I then use a provider in my tests that uses this initialisation helper:

    const randomComponent = mount(
      <UiProvider>
        <I18nextProvider i18n={initI18next}>
          <RandomComponent value={value} />,
        </I18nextProvider>
      </UiProvider>,
    );

All of translations are available in my tests however this console.warn is printed out for each test: react-i18next:: i18n.languages were undefined or empty undefined

Occurs in react-i18next version
"react-i18next": "^10.12.2"
"i18next": "^17.0.11"

To Reproduce
Steps to reproduce the behavior:

1. Run a CRA project using Jest and Enzyme with tests like the example shown.
2. See error

Expected behaviour
I should not see the console.warn message.

OS

• Device: MBP 2015 15"

[jamuhl]

Looks like i18next.init is not finished yet -> that's why you get the warning...

[MasterAM]

I also had this issue and seem to have resolved it. I was only passing the resources to init and not using any async (e.g, xHR) loaders.

Despite passing initImmediate: false to init so that it would initialize synchronously, I was still getting this warning.

After taking a short look at the init() code, it appeared that languages get loaded on init if the lng option is set, and once I set it the warnings stopped.

I guess it is also possible to add a language detector plugin that will run synchronously and change the language, thus triggering a language load as well.

An excerpt of my current code:

i18n.use(initReactI18next).init({
  debug: true,
  initImmediate: false,
  preload: ["en", "fr"],
  fallbackLng: "en",
  lng: "en",
  resources: {
    en: { translation: en },
    fr: { translation: fr }
  }
});

[jamuhl]

@MasterAM setting lng or using a language detector...

[jamuhl]

closing due inactivity