Vue.js Vue3 Vite和jest测试没有模板编译器
我使用Vue3 Vite生成的代码库,但我找不到一种方法来运行导入组件的简单Jest测试。 这在使用Vue cli创建的应用程序中运行良好,但我无法找到一种方法使Jest在使用Vue3的Vue Vite应用程序中运行。 以下是我遇到的错误Vue.js Vue3 Vite和jest测试没有模板编译器,vue.js,testing,jestjs,vuejs3,Vue.js,Testing,Jestjs,Vuejs3,我使用Vue3 Vite生成的代码库,但我找不到一种方法来运行导入组件的简单Jest测试。 这在使用Vue cli创建的应用程序中运行良好,但我无法找到一种方法使Jest在使用Vue3的Vue Vite应用程序中运行。 以下是我遇到的错误 FAIL docs/homepage.spec.js ● Test suite failed to run Vue packages version mismatch: - vue@3.0.0 (/var/www/html/my
FAIL docs/homepage.spec.js
● Test suite failed to run
Vue packages version mismatch:
- vue@3.0.0 (/var/www/html/my_project_vue3_vite/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/var/www/html/my_project_vue3_vite/node_modules/vue-template-compiler/package.json)
但是vue模板编译器在版本3中还不存在,所以今天无法使其工作
我发现了这个例子回购,但它使用摩卡和柴,而不是开玩笑,我找不到一种方法来适应它。
这是我的json包:
{
"name": "front-operation",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"start": "npm run dev && wait-on http://localhost:3000",
"test": "jest --coverage",
"tdd:vite": "vite --config test/vite.config.test.js",
"tdd": "aria-vue -w --path test-ui --script test/plugins.js",
"headless": "aria-vue --offline -w -H --script test/plugins.js ",
"test:watch": "jest --watch",
"test:ci": "jest --ci",
"lint": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
"e2e": "jest",
"format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
"format:all": "prettier --write \"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}\"",
"doc": "compodoc -p tsconfig.json src ",
"mock:server": "json-server --port 8000 --watch ./src/mocks/db.json --routes ./src/mocks/routes.json",
"start:proxy": "vite serve --proxy-config proxy.conf.json",
"start:proxymock": "concurrently --kill-others \"npm run mock:server\" \"yarn start:proxy\""
},
"dependencies": {
"@tailwindcss/typography": "^0.2.0",
"@tailwindcss/ui": "^0.6.2",
"@vue/compiler-sfc": "3.0.0",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"jest": "^26.6.1",
"moment": "^2.29.1",
"qrcode.vue": "^1.7.0",
"tailwindcss": "^1.8.12",
"vue": "3.0.0",
"vue-template-compiler": "^2.6.12"
},
"devDependencies": {
"@babel/preset-typescript": "^7.12.1",
"@types/jest": "^24.0.19",
"@types/koa-router": "^7.4.1",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
"@vue/babel-preset-app": "^4.5.8",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "2.0.0-beta.5",
"aria-mocha": "0.5.2",
"aria-vue": "0.4.1",
"autoprefixer": "^6.7.7",
"babel-core": "^7.0.0-bridge.0",
"compodoc": "0.0.41",
"eslint": "^7.10.0",
"eslint-plugin-vue": "^7.0.1",
"faker": "^5.1.0",
"husky": "^4.3.0",
"jest": "^26.6.1",
"jest-cli": "^26.6.1",
"jest-config": "^26.6.1",
"jest-css-modules": "^2.1.0",
"jest-each": "^26.6.1",
"jest-puppeteer": "^4.4.0",
"jest-serializer-vue": "^2.0.2",
"jest-vue-preprocessor": "^1.7.1",
"json-server": "^0.16.2",
"lint-staged": "^10.5.0",
"prettier": "^2.1.2",
"puppeteer": "^5.4.1",
"ts-jest": "^26.4.3",
"ts-node": "^9.0.0",
"typescript": "^4.0.3",
"vite": "^1.0.0-rc.4",
"vue-gue": "^0.2.0",
"vue-jest": "^3.0.7",
"wait-on": "^5.2.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [
"prettier --write",
"git add"
],
"*.js": [
"prettier --write"
]
}
}
Vue 3的软件包在测试版中使用不同的名称。您正在寻找此软件包:而@Duncan认为
vue模板编译器
现在应该是@vue/compiler sfc
,这在您的情况下没有真正的帮助,因为vue模板编译器
是vue jest
软件包的依赖项
vue-jest
在版本5中引入了对vue 3的支持(仍然是alpha版本),您可以使用npm-install--save-dev-vue来安装它-jest@next
或纱线添加--开发vue-jest@next
谢谢!!!我已经为这个解决方案搜索了3天!我知道vue模板编译器依赖项存在问题,但无法找到如何正确完成。这就是解决办法!