How to use hljsVuePlugin in unit test w/ jest + @testing-library/vue ?

[Scipionh]

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 ?

[joshgoebel]

Perhaps you need to be loading the ESM module rather than the CJS which is going to expect Vue to be declared globally?

[Scipionh]

I'm not sure what you are suggesting here. I'm using import and in the vue-plugin/package.json I can see:

"exports": {
    ".": {
      "require": "./dist/highlightjs-vue.min.js",
      "import": "./dist/highlightjs-vue.esm.min.js",
      "types": "./dist/vue.d.ts"
    }
  },

So it should use the esm module.

[joshgoebel]

Yet, the esm source never once references Vue, so your error makes no sense?...