使用Jest+Vue3时import语句抛出SyntaxError: Unexpected identifier错误求助

• 自定义Vue转换脚本逻辑错误：Jest 26配套的babel-jest 26版本的process方法返回值是包含code（编译后代码字符串）、map（sourcemap对象）的结构化对象，直接将返回值拼接进模板字符串时，对象会被隐式转为[object Object]，最终生成非法JS代码，触发语法报错。
• 自定义转换逻辑不兼容Vue3 SFC规范：手写正则解析单文件组件容错性极低，无法处理<script setup>、模板内反引号、组件注释、style块等常见场景，极易出现匹配错误。
• Vue别名配置错误：配置的vue/dist/vue.common.js是Vue2的CommonJS构建路径，Vue3对应的CommonJS构建文件为vue/dist/vue.cjs.js，路径不匹配也会引发模块加载异常。

1. 安装官方适配的依赖
   执行以下命令安装Vue3单文件组件Jest转换工具及配套依赖：

yarn add @vue/vue3-jest@26 @vue/compiler-sfc babel-core@bridge -D

这里指定@vue/vue3-jest版本为26，和当前使用的Jest 26版本保持兼容。
2. 修正package.json中的Jest配置
将自定义的vue转换规则替换为官方工具，同时修正Vue别名路径，调整后配置如下：

// package.json
"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^vue$": "vue/dist/vue.cjs.js"
  },
  "transform": {
    "^.+\\.vue$": "@vue/vue3-jest",
    "^.+\\.js$": "babel-jest"
  }
}

3. 清理冗余文件
   删除自行实现的jest/jest-vue.js文件，无需再使用自定义转换逻辑。
4. 补充Babel配置（如缺失）
   确保项目根目录存在babel.config.js且包含基础的ES语法转译配置，示例如下：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ]
}

配置完成后重新执行yarn test即可正常运行测试。

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