Vue.js 3:在使用外部库运行单元测试时，未使用挂载定义Vue

Question

我目前在运行单元测试时遇到了以下错误：

ReferenceError: Vue is not defined

> 10 | import hljsVuePlugin from '@highlightjs/vue-plugin';
     | ^

以下是我的组件代码：

<template>
  <div>
    <highlightjs autodetect :code="'hello world'" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import hljsVuePlugin from '@highlightjs/vue-plugin';

export default defineComponent({
  components: {
    highlightjs: hljsVuePlugin.component,
  },
});
</script>

在我的测试文件中，我只是试图挂载这个组件：

const wrapper = mount(FooBlah, {
  global: {
    stubs: {
      highlightjs: {
        template: '<div />',
      },
    },
  },
});

以下是我的库版本：

"vue": "^3.2.33",
"@highlightjs/vue-plugin": "^2.1.2",
"highlight.js": "^11.6.0",
"@vue/cli-plugin-unit-jest": "~5.0.4",
"@vue/test-utils": "^2.0.2",
"@vue/vue3-jest": "^27.0.0",

有没有办法让他简单地忽略highlightjs ( jest.config中的组件)？

Answer 1

正如评论中提到的那样，这解决了我的问题：

jest.mock('@highlightjs/vue-plugin', () => ({
  hljsVuePlugin: {
    component: jest.fn(),
  },
}));
const wrapper = mount(FooBlah, {
  global: {
    stubs: {
      highlightjs: {
        template: '<div />',
      },
    },
  },
})

您可以在这里找到更多信息：How can I mock an ES6 module import using Jest?