Quasar+Vue3项目配置Jest单元测试报错Vue.defineComponent不是函数

根因分析 #

• 实际安装的Vue版本为2.6.14，并非你描述的Vue 3.0.7，仅通过@vue/composition-api扩展支持了组合式API，Vue2原生没有内置defineComponent方法
• 已安装的@vue/test-utils@2.x是Vue3专属的测试工具，内部会直接调用Vue3原生的defineComponent方法，在Vue2环境下运行直接抛出异常

解决方案（二选一） #

方案1：保留当前Vue2 + composition-api技术栈 #

1. 卸载不匹配的测试工具：

npm uninstall @vue/test-utils

2. 安装适配Vue2的测试工具版本：

npm install --save-dev @vue/test-utils@1

3. 修复测试代码的语法错误：原测试代码中wrapper.html是属性调用，实际html是方法，需要改为：

expect(wrapper.html()).toContain('JustTesting');

方案2：切换到正式Vue3技术栈 #

1. 升级Vue核心包，移除冗余依赖：

npm uninstall vue @vue/composition-api vue-template-compiler vue-jest
npm install vue@3 @vue/compiler-sfc @vue/vue3-jest --save

2. 修改组件代码的导入逻辑，defineComponent改为从Vue包直接导入：

import { defineComponent } from 'vue'

3. 修改jest.config的transform配置，匹配vue3-jest：

transform: {
  "^.+\\.js$": "babel-jest",
  ".*\\.(vue)$": "@vue/vue3-jest"
}

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