Vue3 Jest单元测试中如何配置isCustomElement适配Web Components？

配置失效的核心原因 #

当前你在vue-jest中添加的编译期配置本身没有问题，但Vue 3的自定义元素识别逻辑分为模板编译期和运行时组件解析层两个完全独立的环节，仅配置编译期规则无法覆盖运行时的组件查找校验，因此还是会触发无法解析组件的警告。
和Vue 2的全局配置逻辑不同，Vue 3移除了全局的自定义元素配置入口，将识别能力拆分到两个独立的配置节点，遗漏任意一个都会导致警告持续出现。

完整配置步骤 #

• 第一步：保留vue-jest的模板编译期配置
  该配置的作用是让vue-jest在编译.vue单文件的模板时，不把匹配规则的标签当成Vue组件编译成组件引用，而是保留为原生自定义元素输出，配置写法和你目前的实现一致，可根据实际自定义元素的命名规范调整匹配规则：

  "transform": {
      ".*\\.(vue)$":  ["vue-jest", {
        compilerOptions: {
          isCustomElement: tag => tag === 'my-custom-component'
        }
      }],
      "^.+\\.js$": "babel-jest"
  }
  

• 第二步：补充测试运行时的全局解析配置
  这是目前遗漏的关键环节：Vue 3的运行时组件解析逻辑是挂在每个单独的应用实例上的，@vue/test-utils在执行组件挂载时会自动创建独立的测试用应用实例，需要在测试启动阶段统一给全局测试配置打补丁，让运行时也能识别自定义元素、跳过组件查找逻辑。
  在Jest配置的setupFiles对应的入口文件（比如项目根目录下的jest.setup.js）中添加如下代码：

  // jest.setup.js 测试环境启动时自动执行
  import { config } from '@vue/test-utils'
  
  // 统一给所有测试挂载的应用实例配置自定义元素识别规则
  config.global.config = {
    isCustomElement: tag => tag === 'my-custom-component'
  }
  

  注意此处的匹配规则必须和vue-jest编译期的规则完全一致，避免因为规则不统一出现识别偏差。

常见踩坑点 #

• 误用Vue 2的配置写法：Vue 2中使用全局Vue.config.ignoredElements配置的方式在Vue 3中已经完全移除，直接在setupFiles中写老的全局配置不会生效，很多从Vue 2迁移的用户会因为惯性使用这类写法导致配置失效。
• 零散配置替代全局配置：如果没有做全局配置，每个测试用例都要在mount选项里单独传isCustomElement规则，维护成本极高，统一在setupFiles中做全局配置是最稳妥的方式。
• 错配配置位置：比如将isCustomElement添加到babel.config.js中，Vue的编译和运行时逻辑完全不会读取Babel的配置，这类写法不会产生任何实际效果。

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