ReferenceError: Vue is not defined | vuejs3, jest, @testing-library/vue and jest-environment-jsdom-CodePudding

I am unable to run simple jest tests in my vue3 project using @testing-library/vue and jest-environment-jsdom. When I run npm run test I get the following error

    > [email protected] test
    > jest

 FAIL  src/__tests__/HelloWorld.test.js
  ● Test suite failed to run

    ReferenceError: Vue is not defined

      1 | // import library of unit testing library
    > 2 | import { render } from "@testing-library/vue";
        | ^
      3 | import HelloWorld from "../components/HelloWorld.vue";
      4 |
      5 | // The case of unit testing for check render msg

      at Object.<anonymous> (node_modules/@vue/test-utils/dist/vue-test-utils.browser.js:8318:8)
      at Object.<anonymous> (node_modules/@testing-library/vue/dist/render.js:9:18)
      at Object.<anonymous> (node_modules/@testing-library/vue/dist/index.js:30:15)
      at Object.<anonymous> (src/__tests__/HelloWorld.test.js:2:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:317:13)
      at runJest (node_modules/@jest/core/build/runJest.js:407:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:339:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:190:3)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.64 s
Ran all test suites.

Following is the codesandbox link to reproduce this issue, https://codesandbox.io/s/bold-hill-85vr70?file=/src/App.vue.

HelloWorld.test.js

// import library of unit testing library
import { render } from "@testing-library/vue";
import HelloWorld from "../components/HelloWorld.vue";

// The case of unit testing for check render msg
test("Check if render props msg text in HelloWorld", async () => {
  const { getByTestId } = render(HelloWorld, {
    props: { msg: "Hello, My name is Clark!" },
  });

  const title = getByTestId("title");

  expect(title.innerHTML).toBe("Hello, My name is Clark!");
});

Package.json

{
  "name": "vue-testing-library-test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "test": "jest"
  },
  "dependencies": {
    "pinia": "^2.0.14",
    "vue": "^3.2.36",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.2",
    "@rushstack/eslint-patch": "^1.1.0",
    "@testing-library/vue": "^6.6.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/vue3-jest": "^28.0.0",
    "babel-jest": "^28.1.1",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "prettier": "^2.5.1",
    "vite": "^2.9.9"
  }
}

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "vue"],
  transform: {
    "^. \\.js$": "babel-jest",
    ".*\\.vue$": "<rootDir>/node_modules/@vue/vue3-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  testEnvironment: "jsdom",
};

babel.config.json

{
  "presets": ["@babel/preset-env"]
}

If I remove the testEnvironment: "jsdom", from jest.config.js and run npm run test, I get different error as below

  ✕ Check if render props msg text in HelloWorld

  ● Check if render props msg text in HelloWorld

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

I am using @testing-library/vue for the first time, I've no idea why this is not working with jsdom. Any help would be appreciated!

CodePudding user response：

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

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