Vue.js 3单元测试引入外部库报Vue未定义，如何在jest.config忽略组件？

问题原因 #

@highlightjs/vue-plugin在Vue 3环境下导入时，可能依赖全局的Vue对象，但你的组件是通过局部导入defineComponent使用Vue，测试环境中没有全局挂载Vue，导致插件导入时触发错误。你之前配置的组件stubs无法解决这个问题——因为stubs是在组件挂载阶段生效，而插件的导入发生在组件模块加载的更早阶段。

可行的解决方法 #

方法1：通过jest.config配置全局mock插件 #

在jest.config.js中添加moduleNameMapper，指定@highlightjs/vue-plugin的mock文件：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    '@highlightjs/vue-plugin': '<rootDir>/__mocks__/highlightjs-vue-plugin.js'
  }
}

然后在项目根目录创建__mocks__/highlightjs-vue-plugin.js文件，内容如下：

// 模拟插件的component导出，匹配组件中使用的结构
export default {
  component: {
    name: 'highlightjs',
    template: '<div />'
  }
}

这样Jest会自动用这个mock文件替代真实的插件包，避免导入时的错误。

方法2：在单个测试文件中局部mock插件 #

不需要修改全局配置，直接在测试文件顶部添加mock代码：

jest.mock('@highlightjs/vue-plugin', () => ({
  component: {
    name: 'highlightjs',
    template: '<div />'
  }
}))

// 后面的测试代码...
const wrapper = mount(FooBlah)
// 此时可以去掉stubs配置，因为mock已经替代了插件组件

方法3：给测试环境注入全局Vue（不推荐） #

如果一定要保留插件的真实导入，可以在测试环境中注入全局Vue对象：

1. 创建setup-jest.js文件：

import { createApp } from 'vue'
global.Vue = createApp({})

2. 在jest.config.js中配置：

module.exports = {
  // 其他配置...
  setupFiles: ['<rootDir>/setup-jest.js']
}

这种方式可能引入额外的环境依赖，不如前两种mock方法简洁。

对你问题的直接回答 #

可以在jest.config中通过moduleNameMapper配置来忽略（即mock）@highlightjs/vue-plugin，具体配置参考方法1即可。

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