Vue3 Vite 和 jest 测试没有模板编译器

Posted 2023-02-22

【中文标题】Vue3 Vite 和 jest 测试没有模板编译器

【英文标题】：Vue3 Vite and tests with jest has no template compiler

【发布时间】：2021-02-11 23:31:10

【问题描述】：

我使用 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_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-template-compiler 在版本 3 中尚不存在，因此今天无法使其工作。

我找到了这个示例 repo，但它使用的是 Mocha 和 Chai，而不是 Jest，我找不到适应它的方法。 https://github.com/JessicaSachs/vite-component-test-starter

这是我的 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"
    ]
  

【参考方案1】：

虽然@Duncan 是正确的，vue-template-compiler 现在应该是@vue/compiler-sfc，但这对您的情况并没有真正的帮助，因为vue-template-compiler 是vue-jest 包的依赖项。

vue-jest 在版本 5（仍处于 alpha 阶段）中引入了 Vue 3 支持，您可以使用 npm install --save-dev vue-jest@next 或 yarn add --dev vue-jest@next 进行安装。

【参考方案2】：

Vue 3 的包在测试阶段都使用不同的名称。您正在寻找这个包：https://www.npmjs.com/package/@vue/compiler-sfc