When you using jest to test react application, you may have doubts about how to test components which are wrapped by react-i18next's translate function, and how could you verify the translation is applied to your application. Now let's talk about this topic.

1. testing a translated component

This is easy, according to react-i18next document here, you have several choices, but the best one I think is to do as want you did in your app.js:

const enzymeWrapper = mount(
 <Provider store={store}>
  <I18nextProvider i18n={i18n}>
   <ContactTable />
  </I18nextProvider>
 </Provider>
);

You even do not need a mock config (like react-redux), just do as what you have done in your app.js.

But here you will facing another problem if you use backend mode in your i18n initialize file.

2. verify translated text

You want to know whether i18next has translated your text in testing, so you do what I have told you in previous code. But if you use backend mode in your initialize file, you will find that your texts are not translated, the key in t function will be return.

The reason is when you use backend mode, jest will not request translations files from server side (there is no server side in jest testing), so the resolution is to convert backend mode to sync mode. Create a new initialize file for testing:

import i18n from "i18next";
import enCommonTranslations from "./locales/en/common.json";
import zhCommonTranslations from "./locales/en/common.json";
i18n
    .init({
        lng: "en",
        ns: ["common"],
        defaultNS: "common",
        resources: {
            en: {
                common: enCommonTranslations
            },
            zh: {
                common: zhCommonTranslations
            }
        },
        debug: false,
        interpolation: {
            escapeValue: false
        },
        react: {
            wait: false,
            nsMode: "fallback"
        }
    });
export default i18n;

Use this new file as initialize file in your testing, and you will be excited. All languages are perloaded before unit test, and now you can get translated text from your component.