Mock next-intl useTranslations (client)

[bsides]

Hi guys!

I'd like to mock next-intl useTranslations function/hook so I could test my components without having to ever guess what language it's being tested. For that, I want the component to render it with its keys translations instead of its value.

For example, for a server component, the component below:

export const SomeSSRComponent = async () => {
  const t = await getTranslations()
  
  return <h1>{t('wonderful')}</h1>
}

It will just render the key 'wonderful' in my jest test because I don't need / want to check its value - but i do want to test if it's being rendered!

jest.mock('next-intl/server', () => ({
  ...jest.requireActual('next-intl/server'),
  getTranslations: jest.fn().mockReturnValue((key: string) => key),
}))

describe('<SomeSSRComponent />', () => {
  test('renders with proper text', async () => {
    render(await SomeSSRComponent())

    const title = screen.getByText(
      'wonderful',
    )

    expect(title).toBeInTheDocument()
  })
})

...and then this would just pass.

My question here is to do the same with next-int and useTranslations hook. If I try to mock it just like the function getTranslations above, nothing happens.

jest.mock('next-intl', () => ({
  ...jest.requireActual('next-intl'),
  useTranslations: jest.fn().mockReturnValue((key: string) => key),
}))

Do you know how I could get the same result as getTranslations above?

Thank you in advance!

[bsides]

I guess I should TL;DR this:

Is there a way to mock useTranslations hook just like I can mock getTranslations server side function inside a test?

Thank you!

[amannn]

Why would you want to mock useTranslations? useTranslations will by default fall back to the namespace/key that you're using, so that might be just what you're looking for!

What you could do in addition is configure onError on NextIntlClientProvider to disable any error reporting in tests.

[bsides]

I want to mock useTranslations because I want to test only if the key is being rendered instead of its text. I don't want to query the rendered component text itself, I'd rather it just render the key because I have too many languages and I don't want to test the language, just the component functionality.

What you say it does is that it falls back to the key on error but that's not what I want, I want it to render the key at all times. In order to do that with getTranslations, I just do the piece of code below.

jest.mock('next-intl/server', () => ({
  ...jest.requireActual('next-intl/server'),
  getTranslations: jest.fn().mockReturnValue((key: string) => key),
}))

So then when I query the rendered component in a specific part, I just get it by its key, like:

 const title = screen.getByText('a_key_for_the_title_here')

Does that make sense? I think it's way easier to test this way. If a value changes in the translation file I don't need to change the test because most of the time it's irrelevant. If it changes the key though, it probably is.

I wish I could do the same to useTranslations but for whatever reason I couldn't mock it.

[amannn]

I want to test only if the key is being rendered instead of its text. I don't want to query the rendered component text itself, I'd rather it just render the key because I have too many languages and I don't want to test the language, just the component functionality.

Sure, I understand! Is passing no messages to NextIntlClientProvider an option for you? That would already result in the behavior you're looking for, I think. The only task might be to configure onError to avoid any errors logged during your tests.

[bsides]

Oh I get it, change the provider and done. Yeah, that looks good, I'll try that. Some tests were already done with the translation though so I don't know if I could do that now without presenting a big change so I'll see what I can do. Thank you!