next-international: Error when testing `TypeError: (0 , import_react2.cache) is not a function`

Hello,

I’m getting an TypeError: (0 , import_react2.cache) is not a function error while setting up the tests with next-international. Have you already see those types of error ?

About this issue

  • Original URL
  • State: open
  • Created 9 months ago
  • Comments: 23 (7 by maintainers)

Most upvoted comments

For anyone out there struggling with testing for this I was able to get this working with all the following mocks

import { screen } from '@testing-library/react';
import { renderWithStoreI18n } from '@/utils/testing/testingLibraryHelper';
import Home from './page';

const testCache = (func) => func;

jest.mock('react', () => {
  const originalModule = jest.requireActual('react');
  return {
    ...originalModule,
    cache: testCache
  };
});

jest.mock('next/router', () => ({
  useRouter: jest.fn().mockImplementation(() => ({
    locale: 'en',
    defaultLocale: 'en',
    locales: ['en', 'ca', 'gb']
  }))
}));

jest.mock('next/navigation', () => ({
  ...jest.requireActual('next/navigation'),
  useParams: jest.fn().mockReturnValue({
    locale: 'en'
  })
}));

jest.mock('next/headers', () => ({
  headers: jest.fn().mockReturnValue(new Headers({
    'x-next-locale': 'en'
  }))
}));

jest.mock('../../i18n/server', () => ({
  getI18n: jest.fn().mockImplementation(() => jest.fn())
}));

jest.mock('../../i18n/client', () => ({
  useI18n: jest.fn().mockImplementation(() => jest.fn())
}));

describe('Page', () => {
  test('Page renders', async () => {
    const Result = await Home();
    renderWithStoreI18n(Result);
    const homeEl = screen.getByTestId('home-test');
    expect(homeEl).toBeDefined();
  });
});

Is it because it’s embedded in one

That’s my assumption. Either way, Next.js doesn’t have any documentation yet for testing Server Components or Client Components, and next-international doesn’t seem to be the issue here (you could use cache(), useParams()… in application code too, and you’ll get the same errors even if you’re not using next-international).

I guess we’ll have to wait for examples and documentation from Next.js, there is sadly nothing much that I can do.