如何在VS Code中配置Vue Mocha单元测试调试？解决SourceMap不识别问题

我之前也碰到过一模一样的问题，折腾了好一阵才搞定，下面是经过验证的配置方案，你可以一步步调整：

1. 调整package.json的测试脚本 #

首先把test:debug脚本简化，不需要在里面加--inspect-brk，避免和launch.json的配置冲突：

"scripts": {
  "test:debug": "vue-cli-service test:unit"
}

2. 配置Jest生成正确的SourceMap #

Vue CLI的单元测试默认使用Jest，我们需要确保Jest生成inline source map，这样VS Code才能正确映射到你的源码。你可以在项目根目录创建jest.config.js（如果没有的话），添加以下配置：

module.exports = {
  // 保留你原有的其他配置，新增以下关键项
  collectCoverage: false, // 调试时关闭覆盖率，避免干扰SourceMap生成
  sourceMaps: 'inline', // 强制生成内嵌式SourceMap，让VS Code直接识别
  cache: false, // 调试时关闭缓存，确保每次编译都是最新的
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: ['/node_modules/']
};

如果你的项目习惯在vue.config.js里配置Jest，也可以改成这样：

module.exports = {
  // 其他已有配置...
  pluginOptions: {
    jest: {
      sourceMaps: 'inline',
      cache: false
    }
  }
};

3. 更新VS Code的launch.json配置 #

调整launch.json，开启SourceMap支持并优化调试体验：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug unit tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--watchAll=false"], // --watchAll=false避免进入监听模式，方便单次调试
      "port": 9229,
      "sourceMaps": true,
      "smartStep": true, // 自动跳过编译后的冗余代码，直接定位到源码断点
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**" // 跳过node_modules里的第三方代码
      ]
    }
  ]
}

4. 调试前的收尾操作 #

• 先清理Jest缓存：运行npm run test:unit -- --clearCache
• 在你的Vue组件或测试文件里添加debugger语句，或者直接在VS Code源码行号上设置断点
• 启动调试，此时应该会直接在你的源码文件中断，而不是跳到Webpack生成的临时main.js里

为什么这样能解决问题？ #

• 内嵌式SourceMap（sourceMaps: 'inline'）让调试器无需额外加载.map文件，直接从编译后的文件中读取映射信息，避免了路径匹配问题
• smartStep和skipFiles帮你自动过滤掉无关代码，不用在编译后的bundle里找断点
• 去掉重复的--inspect-brk避免了端口冲突和调试器连接异常的问题

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