IntelliJ调试Vue2单文件组件Jest单元测试断点不生效如何解决？

1. 校验依赖版本匹配 #

断点不生效绝大多数情况是依赖版本不兼容导致的，确保以下依赖版本对齐：

• @vue/vue2-jest 大版本必须和Jest完全一致，Jest 27对应安装@vue/vue2-jest@27.x，禁止跨大版本安装
• vue-template-compiler 版本必须和项目中安装的vue版本完全相同，差小版本都会导致源映射生成失败
• 若使用TypeScript，需安装对应Jest 27版本的ts-jest@27.x

2. 修正jest.config.js配置 #

在原有配置基础上补充以下关键配置，确保源映射正常生成：

module.exports = {
  // 保留原有其他配置
  moduleFileExtensions: ['js', 'ts', 'vue', 'json'],
  transform: {
    '^.+\\.vue$': '@vue/vue2-jest',
    '^.+\\.ts$': 'ts-jest'
  },
  // 调试阶段必须关闭覆盖率统计，开启覆盖率会自动禁用源映射
  collectCoverage: false,
  // 开启源映射生成
  transformOptions: {
    sourceMaps: 'both'
  }
}

如果是ts项目，还要确认tsconfig.json中sourceMap配置项设为true。

3. 修正IntelliJ运行配置 #

不要手动添加--inspect-brk参数，会和IDEA自动生成的调试端口冲突导致卡住，按以下规则配置：

• 打开对应Jest调试的编辑配置页
• Node interpreter选本地的14 LTS版本即可
• Jest package选择项目node_modules下的jest包，禁止使用全局jest
• 「Node选项」栏不要填--inspect-brk，可补充添加--enable-source-maps开启Node侧源映射支持
• 工作目录选择项目根目录（即jest.config.js所在目录）

4. 校验IntelliJ调试器配置 #

打开IDEA设置 -> 构建、执行、部署 -> 调试器 -> JavaScript，确认两个选项已勾选：

• 允许在JavaScript文件中设置断点
• 启用源映射

5. 清缓存重试 #

• 删掉项目下node_modules/.cache目录
• 点击IDEA顶部菜单栏 文件 -> 清除缓存并重启
• 重启后重新启动调试，断点即可正常触发

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