Unit tests with Jest and React Testing Library - Couldn't find next-intl config file error

[tommaton]

Hi all,

I've been trying out the latest 2.11.0-beta.15 version with the app directory of Nextjs 13.1.6.

We've created a RSC with next-intl and have it rendering on the page as it should. When we come to write some unit tests for the component we're getting an error

Couldn't find next-intl config file. Please follow the instructions at https://next-intl-docs.vercel.app/docs/next-13/server-components

This is our component:

import { getTranslations } from "next-intl/server";
import { fetchData } from "@graphql/fetchData";
import { getPaymentOptions } from "@graphql/queries";
import Session from "@utils/session";
import { List, ListVariant } from "@components/molecules";
import { PaymentOption } from "@graphql/generated";

/* @ts-expect-error Server Component */
export const PaymentOptions = async (): JSX.Element => {
  // Use getTranslations within async components
  const t = await getTranslations("Index");
  // Retrieve sessionId from ES6 singleton module
  const sessionId = Session.getSessionId();

  // Create mapped objects to fit to the fields for List
  const createList = (options: PaymentOption) => {
    return {
      id: options.paymentMethod || "",
      label: t(options.paymentMethod, { numberMonths: 9 }),
      value: options.amount || "",
      body: options.amount,
    };
  };

  // Perform query to get the payment options
  const { data } = await fetchData({ sessionId }, getPaymentOptions);

  const paymentOptions: PaymentOption[] = data.getPaymentOptions;

  // Restructure data to map to the List component fields
  const listItems = paymentOptions.map((options) => createList(options));

  // return the list of options to pick payment
  return <List variant={ListVariant.Radio} name="paymentOptions" fields={listItems} />;
};

test:

import { render, screen } from "@testing-library/react";

import { PaymentOptions } from ".";

describe("PaymentOptions", () => {
  it("should render correctly", () => {
    render(<PaymentOptions />);

    const result = screen.findAllByText("Single payment");
    expect(result).toBeInTheDocument();
  });
});

our next.config

const withNextIntl = require("next-intl/plugin")(
  // This is the default, also the `src` folder is supported out of the box
  "./i18n.tsx"
);

const nextConfig = {
  basePath: "/billing",
  reactStrictMode: false,
  experimental: {
    appDir: true,
  },
  transpilePackages: ["next-intl", "use-intl"],
};

module.exports = withNextIntl({
  ...nextConfig,
});

packages:

• "next": "13.1.6"
• "next-intl": "2.11.0-beta.15"
• "react": "18.2.0"
• "react-dom": "18.2.0"
• "jest": "^29.4.2"

Any help would be greatly appreciated as I'm beginning to pull my hair now

[amannn]

Hey @tommaton and thanks for the question!

The unit testing story for using next-intl in Server Components hasn't been explored so far to be honest.

Have you written tests for Server Components apart from next-intl so far? Does @testing-library/react/jest support Server Components already? Generally when rendering these kinds of components, I guess you want to mock many parts, right? E.g. your fetch call should probably not execute in your test. Similarly, getTranslations currently depends on the server environment.

Off the top of my head there are two potential solutions here that would work immediately:

1. Split the component so that you end up with a regular component that can use useTranslations. Testing this component with Jest works well.
2. Mock getTranslations.

Does this help?

Personally, when it comes to Server Components I'm using e2e testing frameworks.

[mickbut-ler]

@amannn Is there already another approach for testing server components, that use getTranslation? Or mocking the outcome still the best way to go?

[amannn]

I haven't explored this further so far, my comment above still represents my latest thoughts on the topic!

Personally, I use approach (1) as outlined above when I can in order to avoid mocking in the first place (also for APIs a Server Component might call).

[aXenDeveloper]

Hi,
I created a repo for demo how to tests next-intl with jest => https://github.com/aXenDeveloper/next-intl-app-dir-tests
But I have error here with JavaScript syntax in next-intl.

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation
    
     next-intl-app-dir-tests\node_modules\next-intl\dist\src\link\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default } from './Link';

    SyntaxError: Unexpected token 'export'

[KumarVijayendra]

@aXenDeveloper @amannn
Do we have a solution or proposal on how to proceed with this?

[aXenDeveloper]

Update to the new beta version.

I update my repo and I changed jest to vitest. You can check as an example.

[lucas-av7]

@aXenDeveloper Thanks for providing your solution!

I replaced Jest with Vitest using your example, it fixed my syntax errors.

I also made an update to your code so I don't need to have the <NextIntlProvider> element.

This is what I added:

// vitest.setup.ts

import { createTranslator, useTranslations } from "next-intl";

vi.mock("next-intl", async () => {
  const actual = (await vi.importActual("next-intl")) as any;

  return {
    ...actual,
    useTranslations: vi.fn(),
  };
});

beforeAll(async () => {
  const translate = createTranslator({
    locale: "en",
    messages: (await import("./src/messages/en.json")).default,
  });

  (useTranslations as Mock).mockImplementation(() => translate);
});

[DodgeWhale]

@aXenDeveloper Thanks for providing your solution!

I replaced Jest with Vitest using your example, it fixed my syntax errors.

I also made an update to your code so I don't need to have the <NextIntlProvider> element.

This is what I added:

// vitest.setup.ts

import { createTranslator, useTranslations } from "next-intl";

vi.mock("next-intl", async () => {
  const actual = (await vi.importActual("next-intl")) as any;

  return {
    ...actual,
    useTranslations: vi.fn(),
  };
});

beforeAll(async () => {
  const translate = createTranslator({
    locale: "en",
    messages: (await import("./src/messages/en.json")).default,
  });

  (useTranslations as Mock).mockImplementation(() => translate);
});

Solved my issue, obrigado

[hpnzm]

i modified @lucas-av7 's a bit so we can access namespace like

useTranslations("common")

// vitest.setup.ts

vi.mock('next-intl', async (importActual) => ({
  ...((await importActual()) as any),
  useTranslations: vi
    .fn()
    .mockImplementation((namespace: any) =>
      createTranslator({locale: 'en', messages: en, namespace})
    ),
}));

[andynghiaa]

It saved my day. Thx a lot . Happy coding!