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

Question

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!

ConolBurton · Accepted Answer · 2022-06-13 20:09:16Z

19

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

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

answered Jun 13, 2022 at 20:09

ConolBurton

3634 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhaneshwari · Accepted Answer · 2022-07-29 12:46:39Z

0

I was facing the same issue You need to make sure your jest and testing-library/vue version is good to go with the vue version

For Vue2 Package.json

"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/vue": "^5.8.3",

"jest": {
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "collectCoverage":true,
    "transform": {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "testEnvironment": "jsdom"
}

answered Jul 29, 2022 at 12:46

Dhaneshwari

211 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related