如何配置使@vue/test-utils@1.3.0与@vue/compat@3.1.0正常协同工作

核心结论 #

两个版本可以正常兼容运行，遇到的报错均为Jest侧模块映射配置不全导致，不存在版本本身的兼容硬伤。

报错根因 #

• 初始抛出TypeError: Cannot set property 'productionTip' of undefined：Jest默认没有同步webpack的vue别名规则，@vue/test-utils@1.x是Vue2生态的包，初始化时默认拉取纯Vue3依赖，而纯Vue3已经移除了config.productionTip这个全局配置项，赋值操作直接触发报错。
• 仅配置'^vue$': '@vue/compat'后抛出TypeError: 'set' on proxy: trap returned falsish for property '$emit'：单映射根路径覆盖不全，@vue/test-utils内部、项目第三方依赖还会引用vue/dist/*、vue/runtime-core这类vue子路径资源，这部分代码还是会加载纯Vue3版本，和compat构建的Vue实例混跑时，Proxy拦截逻辑冲突就会触发这个错误。

可直接复用的配置 #

• 补全jest.config.js的moduleNameMapper规则，全量映射所有vue相关导入到compat构建：

// jest.config.js 配置片段
module.exports = {
  // 其余原有配置保持不变
  moduleNameMapper: {
    // 其余原有路径映射保持不变
    '^vue$': '@vue/compat',
    '^vue/(.*)$': '@vue/compat/$1'
  }
}

• 在Jest的全局初始化文件（一般命名为jest.setup.js，需要在jest.config的setupFilesAfterEnv字段中声明引入）中添加compat全局配置，提前初始化test-utils依赖的全局属性：

// jest.setup.js 配置片段
import Vue from 'vue'
import { configureCompat } from 'vue'

// 关闭测试环境下会产生冲突的兼容校验规则
configureCompat({
  INSTANCE_EMIT: false,
  GLOBAL_PROTOTYPE: false
})

// 提前赋值@vue/test-utils初始化时要访问的属性
Vue.config.productionTip = false

• 配置修改完成后先清空Jest缓存，再运行测试命令，避免旧依赖缓存导致配置不生效：

npx jest --clearCache

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