ReferenceError：Vue 未定义 | vuejs3、jest、@testing-library/vue 和 jest-environment-jsdom

Question

我无法使用@testing-library/vuejest在我的 vue3 项目中运行简单的测试和jest-environment-jsdom. 当我运行时npm run test出现以下错误

\n

    > vue-testing-library-test@0.0.0 test\n    > jest\n\n FAIL  src/__tests__/HelloWorld.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    ReferenceError: Vue is not defined\n\n      1 | // import library of unit testing library\n    > 2 | import { render } from "@testing-library/vue";\n        | ^\n      3 | import HelloWorld from "../components/HelloWorld.vue";\n      4 |\n      5 | // The case of unit testing for check render msg\n\n      at Object.<anonymous> (node_modules/@vue/test-utils/dist/vue-test-utils.browser.js:8318:8)\n      at Object.<anonymous> (node_modules/@testing-library/vue/dist/render.js:9:18)\n      at Object.<anonymous> (node_modules/@testing-library/vue/dist/index.js:30:15)\n      at Object.<anonymous> (src/__tests__/HelloWorld.test.js:2:1)\n      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:317:13)\n      at runJest (node_modules/@jest/core/build/runJest.js:407:19)\n      at _run10000 (node_modules/@jest/core/build/cli/index.js:339:7)\n      at runCLI (node_modules/@jest/core/build/cli/index.js:190:3)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.64 s\nRan all test suites.\n

\n

以下是重现此问题的codesandbox链接，\n https://codesandbox.io/s/bold-hill-85vr70?file=/src/App.vue。

\n

HelloWorld.test.js

\n

// import library of unit testing library\nimport { render } from "@testing-library/vue";\nimport HelloWorld from "../components/HelloWorld.vue";\n\n// The case of unit testing for check render msg\ntest("Check if render props msg text in HelloWorld", async () => {\n  const { getByTestId } = render(HelloWorld, {\n    props: { msg: "Hello, My name is Clark!" },\n  });\n\n  const title = getByTestId("title");\n\n  expect(title.innerHTML).toBe("Hello, My name is Clark!");\n});\n

\n

包.json

\n

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

\n

笑话配置.js

\n

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

\n

babel.config.json

\n

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

\n

如果我删除testEnvironment: "jsdom",并jest.config.js运行npm run test，我会收到如下不同的错误

\n

  \xe2\x9c\x95 Check if render props msg text in HelloWorld\n\n  \xe2\x97\x8f Check if render props msg text in HelloWorld\n\n    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.\n    Consider using the "jsdom" test environment.\n

\n

我是@testing-library/vue第一次使用，我不知道为什么这不起作用jsdom. 任何帮助，将不胜感激！

\n

Answer 1

将以下内容添加到您的jest.config.js应该可以解决问题

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