Jest: Create a generic mock where I can pass the custom data - unit-testing

Question

I am using the following in all my individual test case files which runs successfully.
jest.mock('next-i18next', () => {
return {
useTranslation: () => {
return {
t: (key) => {
const translations = {
title: 'May I help?',
showErrors: 'Something went wrong.',
noResultFound: `Oops`,
};
return translations[key];
},
};
},
};
});
The translations change based on different test cases and hence I had duplicated them everywhere I need.
But I want to modify this so that this mock becomes generic(maybe by creating a function) that sits in one place while I call this created function from all the test case files I need and pass my custom dictionary to it. Something like this but it doesn't work:
const mockTranslations = (mockdictionary) => ({
jest.mock('next-i18next', () => {
return {
useTranslation: () => {
return {
t: (key) => {
return mockdictionary[key];
},
};
},
};
})
})
I am not sure if it is possible to do in Jest, still trying to figure out. Any help here or other approach of doing it will be really appreciated.

Answer 1

I would suggest two strategies :
modify your mock, so the t function always returns the translation key (basically, t: (key) => key). In your tests, check that the correct translation key is present in the DOM (expect(getByText("myTranslationKey")).toBeTruthy()). So you can validate that the correct key is used, but not that the corresponding text is correct,
do not mock react-i18next in your test, even better :). More realistic, more confidence. If you load JSON files dynamically, you will need to modify your react-i18next configuration for the Jest tests. In a Jest configuration file, add :
// assuming that you have multiple JSON files in /public/locales/en
import * as namespaces from '/public/locales/en';
i18next.use(initReactI18next).init({
[...]
lng: 'en',
resources: { en: namespaces },
});
So now you can test you real texts in Jest suites.