Why can't Jest run my Next/TypeScript app?

Question

I'm trying to configure Jest on a new Next.js app. I'm trying to use babel (not ts-jest) for parsing TypeScript.

Error:

$ npm run test

> test
> jest

 PASS  lib/features/links/linksApiSlice.test.ts
 FAIL  app/links/page.test.ts
  ● Test suite failed to run

    SyntaxError: /Users/username/dev/polo/polo-ui/app/links/page.test.ts: Unexpected token, expected "," (5:19)

      3 |
      4 | test("renders MyExampleComponent correctly", () => {
    > 5 |   render(<LinkList />);
        |                    ^
      6 | });
      7 |

      at constructor (node_modules/@babel/parser/src/parse-error.ts:74:19)
      at TypeScriptParserMixin.toParseError [as raise] (node_modules/@babel/parser/src/tokenizer/index.ts:1487:19)
      at TypeScriptParserMixin.raise [as unexpected] (node_modules/@babel/parser/src/tokenizer/index.ts:1527:16)
      at TypeScriptParserMixin.unexpected [as expect] (node_modules/@babel/parser/src/parser/util.ts:148:28)
      ...

page.test.ts

import { render } from "@testing-library/react";
import LinkList from "@/app/links/page";

test("renders MyExampleComponent correctly", () => {
  render(<LinkList />);
});

package.json

...

  "devDependencies": {
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-typescript": "^7.24.1",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/node": "20.2.5",
    "@types/react": "18.2.37",
    "@types/react-dom": "^18.2.18",
    "autoprefixer": "^10.0.1",
    "babel-jest": "^29.7.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.3.3"
  }

jest.config.js

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
  coverageDirectory: "coverage",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  moduleNameMapper: {
    "\\.(scss|sass|css)$": "identity-obj-proxy", // TODO: remove now that we're using tailwind + MUI
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  testEnvironment: "jsdom",
  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest",
  },
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.jest.json",
    },
  },
};

tsconfig.json

  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] },
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

tsconfig.jest.json (Provides a different jsx value when running jest)

  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] },
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

babel.config.js

// babel.config.js
// this config is (currently) only needed for running jest tests on typescript files

module.exports = {
  presets: ["next/babel"],
};