Jest error after upgrading Next.js from version 12 to 13

437 Views Asked by At

I've just updated to Next 13.

Now I'm getting this when I run my tests:

Error: Jest: Got error running globalSetup - redacted_path/jest.globalSetup.ts, reason: Cannot find module './generated/generated'
Require stack:
- other_redacted_path/prisma/index.ts

This is the prisma/index.ts file:

import type { Prisma } from "./generated"
import { PrismaClient } from "./generated"

export { PrismaClient }

It seems, for some reason, is duplicating the generated section of the path.

Here is my jest.config.ts:

import type { Config } from "@jest/types"
import * as inspector from "inspector"
import { pathsToModuleNameMapper } from "ts-jest"
import tsconfig from "./tsconfig.json"

const createJestConfig = nextJest({
    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
    dir: "./",
})

const esModulesToTransform = [
    "react-dnd",
    "dnd-core",
    "@react-dnd",
    "fractional-indexing",
    "nanoid",
].join("|")

// Add any custom config to be passed to Jest
const customJestConfig: Config.InitialOptions = {
    // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
    moduleDirectories: ["node_modules", "<rootDir>"],
    // See: https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
    resolver: "./jest.resolver.js",
    // If we test the backend with this same config we probably want to change this to "node"
    // Reference: https://jestjs.io/docs/configuration#testenvironment-string
    testEnvironment: "jsdom",
    setupFiles: ["dotenv/config", require.resolve("whatwg-fetch")],
    setupFilesAfterEnv: ["./jest.setup.ts"],
    testPathIgnorePatterns: ["<rootDir>/e2e/"],
    modulePathIgnorePatterns: ["<rootDir>/.*/prisma/generated"],
    moduleNameMapper: {
        // see https://github.com/transloadit/uppy/issues/4127
        "@uppy/aws-s3": "<rootDir>/frontend/test/mocks/uppy-mock.ts",
        "@uppy/core": "<rootDir>/frontend/test/mocks/uppy-mock.ts",
        "@uppy/react": "<rootDir>/frontend/test/mocks/uppy-mock.ts",
        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
        "\\.svg$": "<rootDir>/frontend/common/test/mocks/svg-mock.ts",
        "nanoid/async": "<rootDir>/node_modules/nanoid/async/index.js",
        ...pathsToModuleNameMapper(tsconfig.compilerOptions.paths),
    },
    globalSetup: "./jest.globalSetup.ts",
    globalTeardown: "./jest.globalTeardown.ts",
    // if running in debug mode, extend test timeout
    testTimeout: inspector.url() ? 3600000 : 60000,
    // See: https://github.com/react-dnd/react-dnd/issues/3443
    // See: https://stackoverflow.com/questions/71427330/nextjs-jest-transform-transformignorepatterns-not-working-with-esm-modules
    transformIgnorePatterns: [
        `<rootDir>/node_modules/(?!${esModulesToTransform})`,
    ],
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = async () => {
    const finalConfig = await createJestConfig(customJestConfig)()
    return finalConfig
}

And my tsconfig.json:

{
    "ts-node": {
        "transpileOnly": true,
        "compilerOptions": {
            "module": "commonjs"
        }
    },
    "extends": "@tsconfig/node16/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": ".",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "incremental": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "lib": ["dom", "dom.iterable", "esnext"],
        "moduleResolution": "node",
        "noEmit": false,
        "outDir": "dist",
        "paths": {
            "@generated/*": ["generated/*"]
        },
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "strict": true,
        "target": "es2017",
        "typeRoots": ["./node_modules/@types", "./@types", "./frontend/@types"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": [
        "node_modules",
        "./screw",
        "**/*.test.*",
        "**/*.spec.*",
        "**/*mock.ts",
        "**/__mocks__/*"
    ]
}

If I remove the paths from the tsconfig.json and moduleNameMapper from the jest.config.ts the error is gone, but I need those because I need to support imports like @generated/something.

Also, be aware I have this structure:

├── generated <-- this is the one I'm accessing with `@generated`.
└── backend
    └── prisma
        └── generated <-- this is the one giving the problem.

Thanks in advance for any help.

EDIT

After digging down, I found the issue is caused by the new compiler of Next, specifically this line: https://github.com/vercel/next.js/blob/a3e56c9c1ee3d85ee3dae226ebe06ec2f349e55d/packages/next/src/build/jest/jest.ts#L155C11-L155C11.

It seems it is already on Next's team radar: https://github.com/vercel/next.js/issues/56144.

0

There are 0 best solutions below