ReferenceError: Vue is not defined | vuejs3, jest, @testing-

Question

我无法在我的ve3项目中使用@testing-library/vue和jest-environment-jsdom运行简单的jest测试。当我运行npm run test时，我得到以下错误

> vue-testing-library-test@0.0.0 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.

下面是重现此问题的codesandbox链接，https://codesandbox.io/s/bold -希尔- 85 vr70?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"]
}

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

✕ 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.

我第一次使用@testing-library/vue，我不知道为什么这不能与jsdom一起工作。任何帮助将不胜感激!

Answer 1

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

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

Answer 2

我也面临着同样的问题您需要确保您的jest和测试库/vue版本与vue版本

一致。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"
}