ReferenceError: Vue is not defined while using shallowMount

[nimcurry]

I am working on vue project and while doing unit testing using jest, I am getting following error for shallowMount:

ReferenceError: Vue is not defined

    > 1 | import { shallowMount } from '@vue/test-utils';
        | ^
      2 | import About from '@/views/About.vue';

Following are my devDependencies from package.json:
"devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.4",
    "@vue/cli-plugin-e2e-cypress": "~5.0.4",
    "@vue/cli-plugin-eslint": "~5.0.4",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.4",
    "@vue/cli-plugin-unit-jest": "^5.0.6",
    "@vue/cli-plugin-vuex": "~5.0.4",
    "@vue/cli-service": "^5.0.4",
    "@vue/compiler-dom": "^3.2.37",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "@vue/test-utils": "^2.0.0",
    "@vue/vue3-jest": "^28.0.0",
    "babel-jest": "^28.1.1",
    "cypress": "^8.3.0",
    "eslint": "^8.17.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-vue": "^9.1.0",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "~2.3.1",
    "vue-cli-plugin-tailwind": "~3.0.0",
    "vue3-jest": "^27.0.0-alpha.1",
    "webpack": "^5.73.0"
  },

Following is my unit test code:

import { shallowMount } from '@vue/test-utils';
import About from '@/views/About.vue';

describe('About.vue', () => {
  test('renders inner text', () => {
    // eslint-disable-next-line no-bitwise
    const wrapper = shallowMount(About);

    expect(wrapper.text()).toContain('about');
  });
});

Following is my Component code:

<template>
  <div class='about'>
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default { name: 'about' };
</script>

Just wonder if I am doing something wrong with unit test or the component code or does the jest and other supporting libraries require version upgrade/downgrade?

[ankurk91]

Same here :disappointed:

FAIL  __test__/component.spec.js
  ● Test suite failed to run

    ReferenceError: Vue is not defined

    > 1 | import {mount} from '@vue/test-utils';
        | ^
      2 | import Component from '../src/js/Component';
      3 |
      4 | describe('Loading component', () => {

      at Object.<anonymous> (node_modules/.pnpm/@vue+test-utils@2.0.0_vue@3.2.37/node_modules/@vue/test-utils/dist/vue-test-utils.browser.js:8318:8)
      at Object.<anonymous> (__test__/component.spec.js:1:1)

Everything seems to be latest

"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.0",
"@vue/vue3-jest": "^28.0.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"vue": "^3.2.37",
"vue-loader": "^17.0.0",

It was working fine with jest v27.x

P.S. Jest is loading vue-test-utils.browser.js file which is expecting Vue to be a globally available in window namespace

[nimcurry]

thank you @ankurk91 .. let me try downgrading on the versions and see how it goes. also thank you for the explanation

[scottnath]

This answer fixed the problem for me: https://stackoverflow.com/a/72608494/13925126

Adding the following to your jest.config.js should fix the issue

    testEnvironmentOptions: {
       customExportConditions: ["node", "node-addons"],
    },

don't know why unfortunately, but works fine now.

relevant deps below - we use both testing-library and vue/test-utils

    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/user-event": "^14.2.1",
    "@testing-library/vue": "6.6.0",
    "@vue/test-utils": "2.0.0",
    "@vue/vue3-jest": "28.0.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "vue": "3.2.37",

[nimcurry]

Thank you @scottnath .. let me try doing the same

[ankurk91]

@scottnath

Thanks, your solution worked

[nimcurry]

The solution worked for me too. Thank you @scottnath . Closing this thread as solution provided above is working

[thedamon]

This is great to have working. Should there be an explanation of why a random setting is necessary (which wasn't in vue-test-utils v1) somewhere in the docs perhaps? This solution is ... not obvious. (is it bc my environment is set to 'jsdom'? 🤔 )

[IlCallo]

@thedamon pretty easy to find the explanation, it's into Jest official docs: https://jestjs.io/docs/configuration#testenvironmentoptions-object

When jest-environment-jsdom is used, Jest automatically assume a "browser" import style, thus importing vue-utils browser build customExportConditions force Jest to use node imports, resulting in CJS build to be used

Another way to solve this is to add an entry into moduleNameMapper as suggested here, but that would force you to add an entry for each package supporting "browser" export target I guess

[milan-rabara]

Hey I got this same error in when working with karma. can you help me with that ? I am trying to upgrade my project to vue2 to vue3 for the test cases i am getting error saying that [ReferenceError: Vue is not defined]

[thedamon]

@thedamon pretty easy to find the explanation, it's into Jest official docs: https://jestjs.io/docs/configuration#testenvironmentoptions-object

When jest-environment-jsdom is used, Jest automatically assume a "browser" import style, thus importing vue-utils browser build

customExportConditions force Jest to use node imports, resulting in CJS build to be used

Another way to solve this is to add an entry into moduleNameMapper as suggested here, but that would force you to add an entry for each package supporting "browser" export target I guess

I think it's only "easy to find" the explanation if you already know the reason and therefore which option to look up in the API docs

[qinkaizhi0516]

@scottnath cool ！it solved my problem， thanks a lot