Vue.js 3: Vue is not defined with mount when running unit tests with external library

Question

I am currently experienced the following error when running my unit tests:

ReferenceError: Vue is not defined

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

Here is my component code:

<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>

in my test file, I'm simply trying to mount this component:

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

Here are my libraries versions:

"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",

Is there any way I could tell him to simply ignore the highlightjs the component in the jest.config ?

You need to mock most if not all third-party libs as you're not testing them but they have undetermined impact on your code. — Estus Flask, Aug 24 '22 at 13:23
@EstusFlask Is there an easy way to do it, I tried using the stubs parameter but it doesn"t seem to work — Scipion, Aug 24 '22 at 13:30
@BoussadjraBrahim I did yep, it works fine if I run the projet, it only fails with the tests — Scipion, Aug 24 '22 at 13:30
Possible duplicate of https://stackoverflow.com/questions/40465047/how-can-i-mock-an-es6-module-import-using-jest — Estus Flask, Aug 24 '22 at 14:50

score 1 · Accepted Answer · answered Aug 25 '22 at 07:08

As mentionned in the comments, this fixed my issue:

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

You can find more information here: How can I mock an ES6 module import using Jest?

Vue.js 3: Vue is not defined with mount when running unit tests with external library

1 Answers1