VSCode调试Next.js（Typescript）项目Jest测试断点异常求助

1. 修正launch.json配置 #

你的现有skipFiles覆盖范围不足，且缺少调试必要的sourceMap相关配置，替换为以下配置：

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Jest",
  "skipFiles": [
    "<node_internals>/**",
    "${workspaceFolder}/node_modules/jest*/**",
    "${workspaceFolder}/node_modules/@jest/**",
    "${workspaceFolder}/node_modules/babel*/**",
    "${workspaceFolder}/node_modules/ts-node/**"
  ],
  "port": 9229,
  "sourceMaps": true,
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
  "outFiles": ["${workspaceFolder}/**/*.js.map"]
}

更推荐直接用launch模式启动调试，无需手动开启Jest的debug端口，配置如下：

{
  "type": "node",
  "request": "launch",
  "name": "Debug Jest Tests",
  "program": "${workspaceFolder}/node_modules/.bin/jest",
  "args": ["--runInBand", "--no-cache"],
  "skipFiles": [
    "<node_internals>/**",
    "${workspaceFolder}/node_modules/**/*.js"
  ],
  "sourceMaps": true,
  "console": "integratedTerminal"
}

其中--runInBand为核心参数，强制Jest单进程执行，避免子进程断点映射失败。

2. 修正jest.config.js重复配置问题 #

你的配置文件中重复定义了moduleNameMapper字段，后定义的别名配置会覆盖之前的样式、资源mock配置，合并两个配置即可：

module.exports = {
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  moduleNameMapper: {
    // 处理样式资源
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
    "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": `<rootDir>/__mocks__/fileMock.js`,
    // 处理别名
    "^@api/(.*)$": "<rootDir>/pages/api/$1",
  },
  testPathIgnorePatterns: [
    "<rootDir>/node_modules/",
    "<rootDir>/.next/",
    "<rootDir>/__tests__/__utils__/",
  ],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { 
      presets: ["next/babel"],
      sourceMaps: "both"
    }],
  },
  transformIgnorePatterns: [
    "/node_modules/",
    "^.+\\.module\\.(css|sass|scss)$",
  ],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  modulePaths: ["<rootDir>/"],
};

3. 调整Babel配置 #

你当前的.babelrc重复添加了@babel/env预设，next/babel已经内置了适配的env配置，重复配置会导致编译逻辑冲突，修改为：

{
  "presets": ["next/babel"]
}

4. 临时调试优化 #

如果调试异步逻辑时依然跳转异常，不要使用单步跳过，直接在异步代码（如数据库连接逻辑）的下一行手动打断点，调试器会直接停在目标位置，避免经过第三方库代码。
运行测试时加--no-cache参数，禁用Jest缓存，避免旧的编译产物导致sourceMap映射错位。

内容的提问来源于stack exchange，提问作者Raph117