ReferenceError: Vue is not defined while using shallowMount

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?

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

[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