If you want to mock the necessary functionality, you can insert this code snippet before your describe block or within beforeEach().

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

I trust this information proves useful to you. Take care.

After doing some research and referring to previous answers, I successfully managed to get the tests working with an instance of i18next by utilizing the renderHook function along with the useTranslation hook from react-i18next.

This is the Home component that I aimed to test:

import { useTranslation } from 'next-i18next';

const Home = () => {
  const { t } = useTranslation("");
  return (
    <main>
      <div>
        <h1> {t("welcome", {ns: 'home'})}</h1>
      </div>
    </main>
  )
};

export default Home;

In order to start testing, we first need to create a setup file for jest to initiate an i18n instance and import translations into the configuration. The file is named test/setup.ts

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

import homeES from '@/public/locales/es/home.json';
import homeEN from '@/public/locales/en/home.json';

i18n.use(initReactI18next).init({
  lng: "es",
  resources: {
    en: {
      home: homeEN,
    },
    es: {
      home: homeES,
    }
  },
  fallbackLng: "es",
  debug: false,
});

export default i18n;

Next, we include the setup file in our jest.config.js:

setupFilesAfterEnv: ["<rootDir>/test/setup.ts"]

We can now proceed to run our tests using the I18nextProvider and the useTranslation hook:

import '@testing-library/jest-dom/extend-expect';
import { cleanup, render, renderHook } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { I18nextProvider, useTranslation } from 'react-i18next';

import Home from '.';

describe("Index page", (): void => {
  afterEach(cleanup);

  it("should render properly in Spanish", (): void => {
    const t = renderHook(() => useTranslation());

    const component = render( 
      <I18nextProvider i18n={t.result.current.i18n}>
        <Home /> 
      </I18nextProvider>
    );

    expect(component.getByText("Bienvenido a Pocky")).toBeInTheDocument();
  });

  it("should render properly in English", (): void => {
    const t = renderHook(() => useTranslation());
    act(() => {
      t.result.current.i18n.changeLanguage("en");
    });

    const component = render( 
      <I18nextProvider i18n={t.result.current.i18n}>
        <Home/>
      </I18nextProvider>
    );
    expect(component.getByText("Welcome to Pocky")).toBeInTheDocument();
  });

});

We utilized the I18nextProvider and passed the i18n instance using the useTranslation hook. Subsequently, the translations were successfully loaded into the Home component without any issues.

We also tested changing the selected language by invoking the changeLanguage() function and examining the other translations.

Need a replacement for the render function? Here's a solution:

import { render, screen } from '@testing-library/react'
import DarkModeToggleBtn from '../../components/layout/DarkModeToggleBtn'
import { appWithTranslation } from 'next-i18next'
import { NextRouter } from 'next/router'


jest.mock('react-i18next', () => ({
    I18nextProvider: jest.fn(),
    __esmodule: true,
 }))
  
const createProps = (locale = 'en', router: Partial<NextRouter> = {}) => ({
    pageProps: {
        _nextI18Next: {
        initialLocale: locale,
        userConfig: {
            i18n: {
            defaultLocale: 'en',
            locales: ['en', 'fr'],
            },
        },
        },
    } as any,
    router: {
        locale: locale,
        route: '/',
        ...router,
    },
} as any)

const Component = appWithTranslation(() => <DarkModeToggleBtn />)

const defaultRenderProps = createProps()

const renderComponent = (props = defaultRenderProps) => render(
    <Component {...props} />
)


describe('', () => {
    it('', () => {

        renderComponent()
     
        expect(screen.getByRole("button")).toHaveTextContent("")

    })
})

To ensure consistent functionality in both testing and production environments, I implemented a more advanced approach rather than simply mocking the functions.

Firstly, I set up a testing environment:

// testing/env.ts
import i18next, { i18n } from "i18next";
import JSDomEnvironment from "jest-environment-jsdom";
import { initReactI18next } from "react-i18next";

declare global {
  var i18nInstance: i18n;
}

export default class extends JSDomEnvironment {
  async setup() {
    await super.setup();
    /* Key section begins */
    const i18nInstance = i18next.createInstance();
    await i18nInstance.use(initReactI18next).init({
      lng: "cimode",
      resources: {},
    });
    this.global.i18nInstance = i18nInstance;
    /* Key section ends */
  }
}

I included this testing environment in jest.config.ts:

// jest.config.ts
export default {
  // ...
  testEnvironment: "testing/env.ts",
};

An example component is shown below:

// component.tsx
import { useTranslation } from "next-i18next";

export const Component = () => {
  const { t } = useTranslation();
  return <div>{t('foo')}</div>
}

In the subsequent tests, I utilized this setup:

// component.test.tsx
import { setI18n } from "react-i18next";
import { create, act, ReactTestRenderer } from "react-test-renderer";
import { Component } from "./component";

it("renders Component", () => {
  /* Key section begins */
  setI18n(global.i18nInstance);
  /* Key section ends */
  let root: ReactTestRenderer;
  act(() => {
    root = create(<Component />);
  });
  expect(root.toJSON()).toMatchSnapshot();
});

After struggling to find a solution or any support within the library, I finally managed to successfully load and test the translations using the following method.

I am currently working with Next JS v12.x and next-i18next v12.1.0 in conjunction with jest and testing-library, but this approach can be adapted to other environments as well.

1. To start, I created a testing utility file src/utils/testing.ts

/* eslint-disable import/no-extraneous-dependencies */
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import { DEFAULT_LOCALE } from 'src/utils/constants';

/**
 * Initializes the instance of i18n with specified namespaces.
 * @param {string[]} namespaces - Array of namespaces.
 * @param {string} locale - Desired locale.
 * @returns {i18n.i18n} Initialized i18n instance.
 */
const initializeI18n = async (
  namespaces: string[],
  locale = DEFAULT_LOCALE
) => {
  const resources: { [ns: string]: object } = {};

  // Loading resources for default language and given namespaces
  namespaces.forEach((ns) => {
    const filePath = `public/locales/${locale}/${ns}.json`;
    try {
      const translations = require(`../../${filePath}`);
      resources[ns] = translations;
    } catch (error) {
      throw new Error(
        `Could not load translations for locale: ${locale}, namespace: ${ns}`
      );
    }
  });

  await i18n.use(initReactI18next).init({
    lng: locale,
    fallbackLng: locale,
    debug: false,
    ns: namespaces,
    defaultNS: namespaces[0],
    resources: { [locale]: resources },
    interpolation: { escapeValue: false },
  });

  return i18n;
};

export default initializeI18n;

2. In my test file, I initialized the instance asynchronously with the desired namespace, rendered the component, and waited for the screen to display the translated text.

describe('when price is zero', () => {
  beforeEach(async () => {
    await initializeI18n(['common_areas']);

    render(<CommonAreaCard commonArea={mockCommonArea(0)} />);
  });

  it('should render the free price', async () => {
    expect(
      await screen.findByText('Sin costo de reservación')
    ).toBeInTheDocument();
  });
});

I trust that these steps will prove helpful to others facing similar challenges.

I managed to resolve the issue by taking the following steps: Include the below snippet in your package.json

"jest": {
  "setupFiles": [
    "./jestSetupFile.js"
  ]
}

Next, insert this code into your jestSetupFile.js

jest.mock("react-i18next", () => ({
  useTranslation: () => {
    return {
      t: (str) => str,
    };
  },
}));

In response to your previous inquiry, I have discovered a method to convert namespaces into their corresponding translated values. Despite my attempts at wrapping the provider proving ineffective, I delved into this new alternative solution.

Here is the initial mock provided by the documentation:

jest.mock('react-i18next', () => ({
 
  useTranslation: () => {
    return {
      t: (str) => str,
      i18n: {
        changeLanguage: () => new Promise(() => {}),
      },
    };
  },
  initReactI18next: {
    type: '3rdParty',
    init: () => {},
  }
}));

We need to modify t(str) => str to output the translation instead of the namespace. Note that it currently returns a string, so we must transform, for instance, "button.proceed" to englishFile["button"]["proceed"]. This alteration will yield the translated value.

The following function accomplishes this task.

const translate = (givenString, file) => {

const splitArr = givenString.split(".");
let result = file;
for (let i = 0; i < splitArr.length; i++) {
    result = result[splitArr[i]];
}
    return result;
};

Subsequently, the revised mock should resemble the example below,

jest.mock("react-i18next", () => ({
    useTranslation: () => {
        // Translation files must be included here to prevent error notifications.
        const enFile = jest.requireActual("../../locales/en.json");
        return {
            t: (key) => translate(key, enFile),
            i18n: {
                changeLanguage: () => new Promise(() => {}),
            },
        };
    },
    initReactI18next: {
        type: "3rdParty",
        init: () => {},
    },
    I18nextProvider: ({ children }) => children,
}));