React-i18next: TypeError: Cannot read property 'options' of undefined

Created on 18 Jun 2018  路  5Comments  路  Source: i18next/react-i18next

I am having the exact same issue described here when I am running some tests on a script using i18n.
However I am not using the package react-redux-i18n.

Here is my config for the i18nTest:

import i18n from 'i18next';

i18n.init({
    fallbackLng : 'cimode',
    saveMissing : false,

    load  : 'currentOnly', // you need to force this if you want fr-FR to be sent back first
    debug : false,

    interpolation : {
        escapeValue     : false, // not needed for react!!
        formatSeparator : false,
        format          : false,
    },
    react : {
        wait   : true,
        nsMode : 'fallback',
    },
});

export default i18n;

The error happens when I try to .dive() on a wrapped component (either mounted or shallowed)

It always return with this line:
TypeError: Cannot read property 'options' of undefined

Most helpful comment

Thanks, I had to solve implementation issues along the way, but it worked well.
Particularly applying this bit:

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  translate: () => Component => {
    Component.defaultProps = { ...Component.defaultProps, t: k => k };
    return Component;
  },
}));

(I slightly modified the example for my needs)

All 5 comments

timing...like everytime it's timing

i18next.init is async -> you need to wait for init done before rendering / testing a component...

Okay, do you have perhaps an example, I tried an async await or use timers but I still get the same kind of results...

i guess that should help: https://github.com/i18next/react-i18next/tree/master/example/test-jest

Just mock i18next away - as you do not need to test i18next but your components!

Thanks, I had to solve implementation issues along the way, but it worked well.
Particularly applying this bit:

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  translate: () => Component => {
    Component.defaultProps = { ...Component.defaultProps, t: k => k };
    return Component;
  },
}));

(I slightly modified the example for my needs)

@AKFourSeven I used your bit of code to solve this issue but then it produced error TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined instead

Was this page helpful?
0 / 5 - 0 ratings