How do you test for translations using Jest and Testing Library?

[SiavoushPerlego]

Hi,

I wanted to know how I can test for actual translations using Jest and Testing Library. In my components, I am using the useTranslation() from next-i18next like so.

const { t } = useTranslation('<namespace>');
const text = t('<key>, { ns: '<namespace>', defaultValue: '<defaultValue> });

When rendering the component using Testing Library, only the key name appears in the component. How can I test so the component renders actual content and not the key name?

Thanks

[adrai]

maybe analogous to: https://react.i18next.com/misc/testing

[bahag-stolyarchukm]

Good day, maybe you could take a look into my case? I am using nextJS project. I have followed documentation of repository we are having discussion on. However, as the author of this post, I am not able to get the content, only the object key

[index.tsx] file
...
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale ?? 'de', [
      'common',
      'header',
      'footer'
    ]))
  }
})

[_app.tsx] file

import { appWithTranslation } from 'next-i18next'

...

export default appWithTranslation(App)

src/intl/component/Loca.tsx

[Loca.tsx] file

import React from 'react'

import { useTranslation, i18n } from 'next-i18next'

type BaseProps = {
  id: string
  values?: Record<string, React.ReactNode>
}

export type Props<T extends React.ElementType> = { as?: T } & Omit<
  React.ComponentPropsWithRef<T>,
  keyof BaseProps | 'as'
> &
  BaseProps

export const Loca = <T extends React.ElementType>(props: Props<T>) => {
  const { as, values, id, ...rest } = props

  const i18ns = i18n?.options.ns

  const { t } = useTranslation(i18ns)

  const mutatedValues = { ...values }

  const element = t(id, mutatedValues)

  return React.createElement(as || React.Fragment, rest, element)
}

packages/bahag-app/src/intl/Loca.tsx

[Loca.tsx] file

import React from 'react'

import { Loca as BaseLoca, Props } from '@app/intl/component'

export const Loca = <T extends React.ElementType>(props: Props<T>) => {
  return React.createElement(BaseLoca, {
    ...props,
    as: props.as || 'span'
  })
}

Usage in component

...
      <Loca as="h1" id="common:help" values={{ value: '123' }} />
...

Testing

[jest.setup.ts] file

// Mock t function
export const t = (key: string, params?: any) => {
  if (key === 'key.with.params') {
    return `key.with.params.${params.param}`
  }

  return key
}

// Mock react-i18next
i18n.use(initReactI18next).init({
  lng: 'de',
  fallbackLng: 'de',
  ns: ['common', 'footer', 'header'],
  defaultNS: 'common',
  resources: {
    de: {
      common: {
        description:
          'This is a non-page component that requires its own namespace',
        help: 'With using {{ value }} <1>locize</1> you directly support the future of <3>i18next</3>.',
        test: {
          ta: 'ta ta ta {{value}}'
        }
      }
    }
  }
})

// Mock your i18n
jest.mock('next-i18next', () => {
  return {
    useTranslation: () => {
      return {
        t,
        i18n: {
          language: 'de',
          changeLanguage: jest
            .fn()
            .mockImplementation((lang: string) => console.log(lang))
        }
      }
    },
    withTranslation: () => (Component: any) => {
      Component.defaultProps = { ...Component.defaultProps, t }

      return Component
    }
  }
})

export const wrapper = ({ mock }: Props) => {
  const router = mockRouter(mock)

  const App = ({ children }: Props) => (
    <RouterContext.Provider value={router}>
      <UI />
      <StartPage />
      {children}
    </RouterContext.Provider>
  )

  return {
    App,
    router
  }
}

[ui.test.tsx] file
...

  const { App, router } = wrapper({})

...
 it('to load i18', async () => {
      await act(async () => void render(<App />))

      const response = await getStaticProps('de' as GetStaticPropsContext)
      expect(response).toEqual(expect.objectContaining(i18props))

      const text = await screen.findByText('common:helps')

      expect(text).toMatchSnapshot()
    })

{
  "description": "This is a non-page component that requires its own namespace",
  "help": "With using {{ value }} <1>locize</1> you directly support the future of <3>i18next</3>.",
  "test": {
    "ta": "ta ta ta {{value}}"
  }
}

Intentional error

[bahag-stolyarchukm]

Okay, that was weird - maybe also could be explained why it worked in my case?

in setup.jest.ts file I ended up with the following code, and it works as intended.

import '@testing-library/jest-dom/extend-expect'
import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'

import common from '../../bahag-app/src/__tests__/locale/de/common.json'
import footer from '../../bahag-app/src/__tests__/locale/de/footer.json'
import header from '../../bahag-app/src/__tests__/locale/de/header.json'

...

i18next.use(initReactI18next).init({
  lng: 'de',
  fallbackLng: 'de',
  ns: ['common', 'footer', 'header'],
  defaultNS: 'common'
})

i18next.addResources('de', 'common', common)
i18next.addResources('de', 'footer', header)
i18next.addResources('de', 'header', footer)

And I am not using jest.mock for i18n - so why does it work only with initiating config for i18n ? I was totally expecting jest.mock. Not that I am complaining that it does work now, but perhaps I am not aware of future problems in this case?

[sichallez]

Thanks a lot for a lot of details. But still couldn't understand what result did you achieve - are you successfully rendering the actual value of the translation or?
Can you show us how you test the actual translation in your ui.test.tsx file please? (code above you are still testing the key by const text = await screen.findByText('common:helps'), and you said intentional error, which I don't understand either.

[bahag-stolyarchukm]

Thanks for the reply!

Ye, I am successfully rendering the text of the key now. For instance:

      "help": "With using {{ value }} you directly support the future of .",

I have made an intentional error so that I could show that the key is not being rendered into the content/text. So instead of common:hep I added s common:helps. I could also achieve that by showing printed DOM by screen.debug() - sorry, forgot to use that.

[ui.test.tsx] file
it('to load i18', async () => {
      await act(async () => void render(<App />))

      const response = await getStaticProps('de' as GetStaticPropsContext)
      expect(response).toEqual(expect.objectContaining(i18props))

      const textCommon = await screen.findByText(/footer/i)
      const textFooter = await screen.findByText(/header/i)
      const textHeader = await screen.findByText(/with using/i)

      expect(textCommon).toBeInTheDocument()
      expect(textFooter).toBeInTheDocument()
      expect(textHeader).toBeInTheDocument()
    })