I am using Next-i18next package for my localization purposes in my project.

I successfully rendered translated content on my UI. But when I try to test my content and text with enzym (shallow testing) and jest-dom, the tests are failed because the translated content does not render correctly.

I have tried various solutions:

• https://react.i18next.com/misc/testing
• Mocking useTranslation for i18n in JEST not working
• How can I enable react-i18n translation file to be used in the unit tests done with react-testing-library and jest?
• How do I mock react-i18next and i18n.js in jest?
• I tried to wrap my test component with <I18nextProvider i18n={i18n}> </I18nextProvider>

No one is working for me.

My test file: form.test.tsx

describe("form", () => {
 it('should render the basic fields', () => {
    render(<MyFormComponent/>)
}
expect(
      screen.getByRole('textbox', { name: /First name/i })
    ).toBeInTheDocument();
})

 it('should match snapshot', () => {
    store = mockStore(initialState);
    const wrapper = shallow(<MyFormComponent/>)
}

I get this type of error from my failed tests:

TestingLibraryElementError: Unable to find a label with the text of: First Name

Because instead of 'First Name' string, the snapshot renders the 'firstName' key in translation json.

Any suggestion and solution will be welcome.