3

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!

2 Answers 2

16

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

    testEnvironmentOptions: {
       customExportConditions: ["node", "node-addons"],
    },
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"
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.