Question: What is the recommended best practice for unit testing?

[RyanClementsHax]

Hello! What is the recommended way to set up unit tests with components that use next-translate?

I currently don't see a straightforward way of doing this, so I concocted my own solution (albiet imperfect). Right now I'm creating a custom render function when using testing-library/react. In that, I use I18nProvider then pass in any translations I think it might need, but this can get unwieldy since this would require me to know all the translations my tests will need upfront.

// testUtils.tsx
import React from 'react'
import { render } from '@testing-library/react'
import I18nProvider from 'next-translate/I18nProvider'
import index from 'locales/en/index.json'

const Providers: React.FC = ({ children }) => (
  <I18nProvider lang="en" namespaces={{ index }}>
    {children}
  </I18nProvider>
)

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const customRender: typeof render = ((ui: any, options: any) =>
  render(ui, { wrapper: Providers, ...options })) as unknown as typeof render


export * from '@testing-library/react'

export { customRender as render }

In the test, I'm trying to use getT to get the translation being used, but I get the following error:

Is there a recomended way of going about this?
Thanks

Edit: turns out this is also an open question on stack overflow

[aralroca]

You can fix It adding the config json on global.i18nConfig, config.loadLocaleFrom is not working because config is get from this helper https://github.com/vinissimus/next-translate/blob/b1f0f409508d1a53a11018229a6789b56be76dc6/src/getConfig.tsx#L3-L7

[LarsEjaas]

Not sure if it can help anyone?
I used quite a bit of time on setting up test utils for next with next-translate.

I choose to test all my components with the English translation.

Here is my solution:

//testUtils.ts
import React, { PropsWithChildren, ReactElement } from "react";
import { render, RenderOptions, RenderResult } from "@testing-library/react";
import I18nProvider from "next-translate/I18nProvider";
import commonEN from "../../locales/en/common.json";
import cookieEN from "../../locales/en/cookie.json";
import config from "../../i18n.json";

const Providers = ({
  children,
}: PropsWithChildren<NonNullable<React.ReactNode>>) => {
  return (
        <I18nProvider
          lang={"en"}
          namespaces={{
            common: commonEN,
            cokkie: cookieEN
          }}
          config={config}
        >
          {children}
        </I18nProvider>
  );
};

const renderWithProviders = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">
): RenderResult => {
  return render(ui, { wrapper: Providers, ...options });
};

// re-export everything
export * from "@testing-library/react";

// override render method
export { renderWithProviders as render };

In the actual tests I will then import render (and any other methods) from testUtils.ts:

import { fireEvent, render, screen } from "../../utils/testUtils";

This will render components with the actual translations inside the test environment.

[heinhzaw]

Can I know that you have some snapshot tests? If you have, does the translation text appear in snapshots?
I'm trying to do snapshot tests but it seems to me that only translation key are generated inside snapshot test.
I also have Test Utils for I18nProvider with namespaces as well.

[aralroca]

In case to test hooks using the useTranslation, is possible to mock the useTranslation:

jest.setup.js:

import transCore from 'next-translate/transCore';

const lang = 'en-EN';

const allNamespaces = require('fs').readdirSync(`./locales/${lang}`).reduce((all, file) => {
  const namespace = file.split('.')[0];
  all[namespace] = require(`./locales/${lang}/${namespace}.json`);
  return all;
}, {});

jest.mock('next-translate/useTranslation', (namespace = 'common') => () => ({
  t: (id, params = {}) => {
    const prefix = id.includes(':') ? '' : `${namespace}:`;
    const t = transCore({
      config: { logger: () => null },
      allNamespaces,
      pluralRules: new Intl.PluralRules(lang),
      lang,
    });
    return t(`${prefix}${id}`, params);
  },
  lang,
}));

This is needed because the normal useTranslation hook is consuming the context from I18nProvider wrapper component, so in the tests you can directly provide a different context inside the useTranslation hook with the language and the namespace you want.