[Vitest] - Unit Testing server components

[theboyWhoCriedWoolf]

Hello,

I am trying to test server components which are all calling getTranslations. this seems to work fine for a Root component without children, however, seems to throw the following error when child components are also present.

A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

I am using:

• vitest
• rtl

My setup is

const ChildComp = () => {
  const t = await getTranslations('SomeKey');
  
  return <div>{t('some_value_key)}</div>
}

const Component = async () => {
   const t = await getTranslations('SomeKey')
   
   return <div>
         // this works
        {t('some_value_key)}
        // fails
        <ChildComp />
   </div>
}

My test script is:

vi.mock('next-intl/server', async () => {
  const translate = createTranslator({
      locale: 'en',
      messages: dictionaries,
  })
  
  return {
    getTranslations: vi.fn(async () =>  translate),
  }
})

 test('renders the component', async () => {
    await act(async () => {
      render(
        <Suspense fallback="loading...">
          <Comp />
        </Suspense>,
      )
    })

  // ... rest
})

[amannn]

This might be relevant for you: #771