I have the following jest.config.ts:

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({ dir: "./" });

const config: Config = {
  projects: [
    {
      displayName: "backend",
      testMatch: ["<rootDir>/tests/**/*.test.ts"],
      testEnvironment: "node",
      clearMocks: true,
      preset: "ts-jest",
      globalSetup: "<rootDir>/tests/globalSetup.ts",
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    },
    {
      displayName: "frontend",
      testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
      testEnvironment: "jsdom",
      clearMocks: true,
      preset: "ts-jest",
      setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    },
  ],
};

export default createJestConfig(config);

This works for my backend tests, but fails to compile any jsx. After a bunch of fiddling, I figured out that the issue is with using nextJest alongside projects. The following frontend only config works:

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({ dir: "./" });

const config: Config = {
  displayName: "frontend",
  testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
  testEnvironment: "jsdom",
  clearMocks: true,
  preset: "ts-jest",
  setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

export default createJestConfig(config);

It looks like whatever modifications nextJest makes to the config, it doesn't know how to do that for projects.

Is there a way to still use nextJest? Or at least a clean way to reproduce whatever transformations nextJest is doing to my jest config?

I know I can just print the working config that nextJest generates and manually build my jest.config.ts from that, but that seems messy and brittle and I'd really like to avoid it if possible!

I have the following jest.config.ts:

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({ dir: "./" });

const config: Config = {
  projects: [
    {
      displayName: "backend",
      testMatch: ["<rootDir>/tests/**/*.test.ts"],
      testEnvironment: "node",
      clearMocks: true,
      preset: "ts-jest",
      globalSetup: "<rootDir>/tests/globalSetup.ts",
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    },
    {
      displayName: "frontend",
      testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
      testEnvironment: "jsdom",
      clearMocks: true,
      preset: "ts-jest",
      setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    },
  ],
};

export default createJestConfig(config);

This works for my backend tests, but fails to compile any jsx. After a bunch of fiddling, I figured out that the issue is with using nextJest alongside projects. The following frontend only config works:

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({ dir: "./" });

const config: Config = {
  displayName: "frontend",
  testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
  testEnvironment: "jsdom",
  clearMocks: true,
  preset: "ts-jest",
  setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

export default createJestConfig(config);

It looks like whatever modifications nextJest makes to the config, it doesn't know how to do that for projects.

Is there a way to still use nextJest? Or at least a clean way to reproduce whatever transformations nextJest is doing to my jest config?

I know I can just print the working config that nextJest generates and manually build my jest.config.ts from that, but that seems messy and brittle and I'd really like to avoid it if possible!

• reactjs
• testing
• next.js
• jestjs
• ts-jest

1 Answer 1

The process of writing up the question got my brain working, and I worked out a reasonable solution:

import type { Config } from "jest";
import nextJest from "next/jest.js";

const createJestConfig = nextJest({ dir: "./" });

const buildConfig = async (config: Config): Promise<Config> => {
  return await createJestConfig(config)();
};

export default async (): Promise<Config> => {
  const backendConfig = await buildConfig({
    displayName: "backend",
    testMatch: ["<rootDir>/tests/**/*.test.ts"],
    testEnvironment: "node",
    clearMocks: true,
    preset: "ts-jest",
    globalSetup: "<rootDir>/tests/globalSetup.ts",
    moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1",
    },
  });

  const frontendConfig = await buildConfig({
    displayName: "frontend",
    testMatch: ["<rootDir>/src/**/*.test.{ts,tsx}"],
    testEnvironment: "jsdom",
    clearMocks: true,
    preset: "ts-jest",
    setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
    moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1",
    },
  });

  const config: Config = {
    projects: [backendConfig, frontendConfig],
  };

  return config;
};

I'm not going to mark it as an answer right away in case someone knows a better approach, but this seems ok to me.