How to set up test environment next.js project using next-18next ? when Link of next-18next is imported in a component test are failing

Question

set up of next-i18next in -- i18n.ts

const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  browserLanguageDetection: true,
  otherLanguages: ['en', 'ar'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales')
})

export default NextI18NextInstance

export const {appWithTranslation, Link, Trans, Router, config, withTranslation, i18n} = NextI18NextInstance

My component using next-i18next Link component

import React, { FC, useState } from 'react'
import {Link} from 'i18n'
<FormGroup>
  <Link href="/auth/reset-password">
    <Typography className={classes.forgotPassword} variant="body2" color="primary">
       {t('signIn:forgotPassword')}
    </Typography>
  </Link>
 </FormGroup>

Test file

import "@testing-library/jest-dom"

jest.mock('react-i18next', () => ({
  useTranslation: () => ({t: (key:string):string => key})
}));

describe("Sign-in Form show", () => {
  afterEach(cleanup)
  it("required errors on submit empty form", async() => {
    const {findByText} = render(<SignIn/>)
    fireEvent.submit(await findByText('submit'))
    const userError = await findByText('signIn:usernameRequired')
    expect(userError).toBeInTheDocument()
    const passwordError = await findByText('signIn:passwordRequired')
    expect(passwordError).toBeInTheDocument()
  })

as suggested in react-i18next test setup i have mocked react-i18n.ts in mocks folder

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

i18n
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',

    // have a common namespace used around the full app
    ns: ['common', 'signIn'],
    defaultNS: 'common',

    debug: false,

    interpolation: {
      escapeValue: false, // not needed for react!!
    },

    resources: { en: { translations: {} } },
  });

export default i18n;

Error occured while running tests

  ● Test suite failed to run

    TypeError: (0 , _reactI18next.withTranslation) is not a function

    > 1 | const NextI18Next = require('next-i18next').default
        |                     ^
      2 | const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
      3 | const path = require('path')
      4 | 

      at Object.<anonymous> (node_modules/next-i18next/dist/commonjs/components/Link.js:132:50)
      at Object.<anonymous> (node_modules/next-i18next/dist/commonjs/components/index.js:21:36)
      at Object.<anonymous> (node_modules/next-i18next/dist/commonjs/hocs/app-with-translation.js:86:19)
      at Object.<anonymous> (node_modules/next-i18next/dist/commonjs/hocs/index.js:19:27)
      at Object.<anonymous> (node_modules/next-i18next/dist/commonjs/index.js:36:13)
      at Object.<anonymous> (i18n.ts:1:21)
      at Object.<anonymous> (components/sign-in-flow/SignIn.tsx:16:1)
      at Object.<anonymous> (__tests__/components/SignIn.test.tsx:3:1)

As am new to test i need a solution to fix all the next-i18next related integration to run test without any error.

Hope i find a good solution for my problem.