VS Code调试Jest测试时显示错误值的问题解决咨询

问题描述 #

在VS Code中使用TypeScript+Jest开发调试API测试时，出现调试器变量显示错误的情况：

• 含axios的异步测试里，调试器显示response值为200（实际应为完整响应对象），本地变量面板与监视面板的值不一致
• 无异步依赖的测试里，第一个断点查看data值正常，第二个断点查看data时仅显示data.x的内容
  该问题仅在Jest环境中出现，使用Mocha/Chai执行相同测试时，调试器显示正常。

相关代码与配置 #

异步测试代码 #

it ('should do something', () => {
    return axios.get('http://www.google.com')
    .then ((response: any) => {
        expect(response.status).toEqual(200)
        console.log('xxxx')
    })
})

同步测试代码 #

it ('should do something', async ()=> {
    const data = {"x":[{"Id":1,"Name":"One","Type":"thing"},{"Id":2,"Name":"Two","Type":"stuff"}]}
    console.log('1111')
    console.log(data.x[0].Id)
    console.log ('2222')
})

launch.json配置 #

{
    "name": "Jest API Tests, Current",
    "type": "node",
    "request": "launch",
    "runtimeArgs": [
        "--inspect-brk",
        "node_modules/.bin/jest",
        "--runInBand",
        "--testTimeout=9999999",
        "--testMatch=${file}"
    ],
    "cwd": "${workspaceRoot}/API-Testing",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "envFile": "${workspaceRoot}/.vscode/.p4d-adf"
}

解决方法 #

1. 改用VS Code官方Jest插件调试 #

自定义node调试配置易与Jest运行机制冲突，官方插件能更好适配：

• 在VS Code扩展市场搜索并安装Jest官方插件
• 安装后插件会自动识别Jest配置，直接在测试代码旁点击调试按钮启动调试，无需手动配置launch.json

2. 调整launch.json配置适配Jest #

若坚持使用自定义launch配置，修改如下：

{
    "name": "Jest API Tests, Current",
    "type": "node",
    "request": "launch",
    "program": "${workspaceFolder}/node_modules/jest/bin/jest.js",
    "args": [
        "--runInBand",
        "--testTimeout=9999999",
        "--testMatch=${file}"
    ],
    "cwd": "${workspaceRoot}/API-Testing",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "envFile": "${workspaceRoot}/.vscode/.p4d-adf",
    "sourceMaps": true,
    "disableOptimisticBPs": true
}

• 用program指定Jest入口文件，替代runtimeArgs中直接调用node_modules/.bin/jest
• 开启sourceMaps确保源码映射正确
• 启用disableOptimisticBPs禁用断点预加载，避免断点偏移导致变量显示异常

3. 禁用Jest代码优化 #

Jest默认的代码转换优化可能干扰调试器解析变量，在jest.config.js中添加配置：

module.exports = {
  // 其他原有配置...
  transform: {
    '^.+\\.tsx?$': ['ts-jest', {
      diagnostics: false,
      isolatedModules: true
    }]
  },
  cache: false
}

• 关闭缓存避免旧转换代码干扰调试
• 配置ts-jest禁用不必要诊断和隔离模块，减少代码转换对调试的影响

4. 更新依赖版本 #

确保以下依赖为最新稳定版：

• jest
• ts-jest
• typescript
• VS Code内置的vscode-js-debug（通过更新VS Code即可同步更新）
  旧版本依赖可能存在调试兼容性bug。

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