测试套件无法运行在 vue3 中使用 jest 时找不到模块'vue-template-compiler

Posted 2023-02-22

【中文标题】测试套件无法运行在 vue3 中使用 jest 时找不到模块\'vue-template-compiler

【英文标题】：Test suite failed to run Cannot find module 'vue-template-compiler when using jest in vue3测试套件无法运行在 vue3 中使用 jest 时找不到模块'vue-template-compiler

【发布时间】：2021-04-23 16:51:22

【问题描述】：

当我尝试用 jest 运行测试时，我似乎在 vue3 中遇到了错误。

Test suite failed to run Cannot find module 'vue-template-compiler

这是我尝试运行测试时得到的结果。 我知道这个包来自 vue2，我安装了“@vue/compiler-sfc”，这是 vue3 版本。 如果我确实安装了那个 vue-template-compiler 包，我会收到版本不匹配的错误。

任何找到此问题解决方案的人，或者只是等到他们更新 vue-jest 以使用其他包。

这是我的 package.json

  "name": "project",
  "version": "0.1.0",
  "private": true,
  "jest": 
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": 
      "^.+\\.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    
  ,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit -w",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "test": "nightwatch",
    "testMocha": "mocha",
    "testJest": "jest"
  ,
  "dependencies": 
    "@vue/cli-plugin-unit-jest": "^4.5.10",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^9.8.6",
    "firebase": "^8.2.3",
    "jspdf": "^2.3.0",
    "nightwatch": "^1.5.1",
    "postcss": "^7.0.35",
    "register-service-worker": "^1.7.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.5",
    "vue-class-component": "^8.0.0-0",
    "vue-jest": "^3.0.7",
    "vue-loader": "^15.9.6",
    "vue-router": "^4.0.3",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^4.0.0-0"
  ,
  "devDependencies": 
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-e2e-nightwatch": "^4.5.10",
    "@vue/cli-plugin-eslint": "^4.5.10",
    "@vue/cli-plugin-pwa": "^4.5.10",
    "@vue/cli-plugin-router": "^4.5.10",
    "@vue/cli-plugin-typescript": "^4.5.10",
    "@vue/cli-plugin-unit-mocha": "^4.5.10",
    "@vue/cli-plugin-vuex": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-beta.14",
    "chai": "^4.1.2",
    "chromedriver": "^87.0.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.4.1",
    "sass": "^1.32.4",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-tailwind": "^2.0.5"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": 
      "ecmaVersion": 2020
    ,
    "rules": ,
    "overrides": [
      
        "files": [
          "**/__tests__/*.j,ts?(x)",
          "**/tests/unit/**/*.spec.j,ts?(x)"
        ],
        "env": 
          "mocha": true
        
      
    ]
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

【问题讨论】：

你是如何设置项目的？

使用 cli。添加了 jest 测试，通过那里进行夜间守望，然后添加了 mocha，因为我想比较我的论文的不同测试路线

我已经使用 vue 3、typescript 和 tailwind 开发了一个项目，但是我没有添加 jest，你可以 fork 并尝试添加测试github.com/boussadjra/vue3-tailwind2

是的。我为在作品上测试它而制作的项目。还使用了打字稿和顺风，效果很好。使用 nightwatch 进行测试似乎适用于 e2e 测试。我试图检查赛普拉斯，但他们仍在为 vue3 开发，它在他们的文档中说。很遗憾，这还没有更新到一起工作。

【参考方案1】：

要让它在 vue 3 中工作，你需要两件事。

vue-jest v5 和 test-utils v2 的最新版本。

vue-jest v5 是支持 Vue 3 的版本。它仍处于 alpha 阶段，与 Vue.js 3 生态系统的其他部分非常相似。

npm I vue-jest@next @vue/test-utils@next -D

开玩笑说一下如何转换vue 文件：

module.exports = 
  //...
  transform: 
    "^.+\\.vue$": "vue-jest",
  ,
;

【参考方案2】：

我试图让测试库在非 vue-cli webpack 项目下工作时遇到了同样的问题。尝试更新到 vue-jest 5。对于我的项目，这是：

"jest": "^25.5.4",
"vue-jest": "^5.0.0-alpha.7",

此提示来自与此gist 相关的讨论。

【参考方案3】：

通过将我的jest.config.js 更改为：

module.exports = 
  preset: '@vue/cli-plugin-unit-jest',
  transform: 
    '^.+\\.vue$': 'vue-jest',
  ,