測試套件無法運行在 vue3 中使用 jest 時找不到模塊'vue-template-compiler

Question

當我嘗試用 jest 運行測試時，我似乎在 vue3 中遇到了錯誤。

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

這就是我嘗試運行測試時得到的結果。 我知道 package 來自 vue2，我安裝了“@vue/compiler-sfc”，這是 vue3 版本。 如果我確實安裝了那個 vue-template-compiler package 我得到版本不匹配的錯誤。

任何找到這個問題的解決方案的人，或者只是等到他們更新 vue-jest 以與其他 package 一起工作。

這是我的 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,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "mocha": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

我試圖讓測試庫在非 vue-cli webpack 項目下工作時遇到了同樣的問題。 嘗試更新到 vue-jest 5。對於我的項目，這是：

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

此提示來自與此要點有關的討論。

Answer 2

通過將我的jest.config.js更改為：

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

Answer 3

為了讓它在 vue 3 中工作，你需要兩件事。

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

vue-jest v5 是支持 Vue 3 的版本。它仍處於 alpha 階段，很像 Vue.js 3 生態系統的 rest。

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

2. 開玩笑說一下如何轉換vue文件：

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