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!