Vue2组件库升级Vue3后Jest测试报错：Cannot call...空DOMWrapper

核心问题是.vue文件的<template>标签未被@vue/vue3-jest正确编译为渲染函数，导致测试时组件无DOM结构，触发空DOMWrapper错误。以下是针对性修复步骤：

1. 移除过时依赖 #

babel-preset-vue是Vue 2专属预设，Vue 3环境下完全不需要，会与@vue/vue3-jest产生冲突，直接卸载：

npm uninstall babel-preset-vue
# 或 yarn remove babel-preset-vue

2. 调整Jest配置关键项 #

你的jest.config.json存在两处核心问题，修改如下：

{
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "testEnvironmentOptions": {
    "customExportConditions": ["node", "node-addons"]
  },
  "rootDir": "..",
  "setupFiles": [
    "<rootDir>/jest/setup.js"
  ],
  "transform": {
    // 将.vue文件转换器放在最前面，确保优先处理
    "^.*\\.vue$": "@vue/vue3-jest",
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.tsx?$": "ts-jest"
  },
  "transformIgnorePatterns": [
    "/node_modules/(?!(@storybook/.*\\.vue$))"
  ],
  "testRegex": "/__tests__/.*\\.spec\\.(ts|js)$",
  "moduleFileExtensions": [
    // 将vue扩展名放在首位，提升识别优先级
    "vue",
    "ts",
    "tsx",
    "js",
    "jsx",
    "json"
  ],
  "moduleNameMapper": {
    "\\.(jpg|png|gif|svg)$": "<rootDir>/jest/image-mocks.js"
  },
  // 移除Vue 2的快照序列化器，改用@vue/vue3-jest内置逻辑
  "snapshotSerializers": [],
  // 其余配置保持不变...
}

3. 验证TypeScript配置（若使用TS） #

确保tsconfig.json未排除.vue文件，且类型声明包含Vue和Jest：

{
  "compilerOptions": {
    "types": ["jest", "vue"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

4. 检查全局测试配置文件 #

确认jest/setup.js未错误引入Vue 2相关插件，保持配置简洁：

import { config } from '@vue/test-utils'

// 仅注册Vue 3所需的全局组件/指令，示例：
// config.global.components = { MyGlobalComponent }

完成以上修改后重新运行Jest测试，.vue文件的<template>会被正确编译，空DOMWrapper错误将解决。

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