Issue with NextIntlClientProvider in Unit Testing using Jest: Type Undefined #879

ricardomiguez · 2024-02-22T21:15:16Z

ricardomiguez
Feb 22, 2024

Hello everyone,

I'm working on an application where I'm using next-intl and App Router for the first time. I've set up next-intl in my application, and it seems to be working correctly.

Problem

After installing Jest and Testing Library, I created unit tests for the pages of my application (which currently only have a title using next-intl). For each of these pages, I wrap the page component with NextIntlClientProvider, and it works correctly.

import { render } from '@testing-library/react';
import { NextIntlClientProvider } from 'next-intl';

import Clients from '@/app/[locale]/clients/page';

const locale = 'en';
const messages = {
  Clients: {
    title: 'Clients',
  },
};

describe('Clients page', () => {
  it('should render correctly', () => {
    const { container } = render(
      <NextIntlClientProvider locale={locale} messages={messages}>
        <Clients />
      </NextIntlClientProvider>,
    );
    expect(container).toMatchSnapshot();
  });
});

However, when I try to do the same with a component (in this case, the Header component), the NextIntlClientProvider is imported with the type undefined, which causes an error.

import { render } from '@testing-library/react';
import { NextIntlClientProvider } from 'next-intl';

import Header from '@/components/header';

jest.mock('next/navigation', () => ({
  usePathname() {
    return '/dashboard';
  },
  useRouter() {
    return {
      replace: () => jest.fn(),
    };
  },
  useSearchParams() {
    return {
      searchParams: {
        toString: jest.fn(),
      },
    };
  },
}));

jest.mock('next-intl', () => ({
  useTranslations() {
    return {
      t: jest.fn(),
    };
  },
  useLocale() {
    return {
      currentLocale: 'en',
    };
  },
}));

const locale = 'en';

const messages = {
  Header: {
    Dashboard: 'Dashboard',
    Clients: 'Clients',
    Reports: 'Reports',
    Maintenance: 'Maintenance',
    Support: 'Support',
  },
};

describe('Header component', () => {
  it('should render correctly', () => {
    const { container } = render(
      <NextIntlClientProvider locale={locale} messages={messages}>
        <Header />
      </NextIntlClientProvider>,
    );
    expect(container).toMatchSnapshot();
  });
});

Here's the error generated:

Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.]

So far, I only have the layout.tsx file (located in src/app/[locale]/layout.tsx) in my application, which contains the NextIntlClientProvider wrapper.

// src/app/[locale]/layout.tsx

...

return (
    <html lang={locale}>
      <body
        className={cn(
          'min-h-screen bg-background font-sans antialiased',
          fontSans.variable,
          fontSansExtraCondensed.variable,
        )}
      >
        <NextIntlClientProvider locale={locale} messages={messages}>
          <Header />
          <main className="flex flex-1 justify-center">{children}</main>
        </NextIntlClientProvider>
      </body>
    </html>
  );

...

Question

Do you know how I can solve this issue?

Answered by amannn

Feb 23, 2024

Hmm, that's quite odd.

Did you compare your implementation to the one from example-app-router?

As a side note, you shouldn't have to mock next-intl for your test.

View full answer

amannn · 2024-02-23T08:50:07Z

amannn
Feb 23, 2024
Maintainer

Hmm, that's quite odd.

Did you compare your implementation to the one from example-app-router?

As a side note, you shouldn't have to mock next-intl for your test.

1 reply

ricardomiguez Mar 1, 2024
Author

You are absolutely right. To fix the problem I did the following:

Removed the next-intl mock
Deleted the yarn.lock file and node_modules directory in order to reinstall all dependencies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue with NextIntlClientProvider in Unit Testing using Jest: Type Undefined #879

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issue with NextIntlClientProvider in Unit Testing using Jest: Type Undefined #879

Uh oh!

ricardomiguez Feb 22, 2024

Problem

Question

Replies: 1 comment · 1 reply

Uh oh!

amannn Feb 23, 2024 Maintainer

Uh oh!

ricardomiguez Mar 1, 2024 Author

ricardomiguez
Feb 22, 2024

Replies: 1 comment 1 reply

amannn
Feb 23, 2024
Maintainer

ricardomiguez Mar 1, 2024
Author