Vue-jest未能从vue文件收集覆盖率。

Question

你好，我刚开始玩vue和jest。我给已经存在的vue项目添加了一个玩笑。

我希望从.js和.vue文件中获得测试覆盖率结果。

但。情况不太好。

当我尝试运行时，

vue-cli服务测试:单元

返回错误以下的

D:\work\project\src\components\service\sidebar\partials\menu.vue未能收集到

的覆盖率

错误:在插件中找到Falsy值

这是我的配置文件

.babelrc

{
  "presets": [
    ["env"], "stage-2"
  ],
  "plugins": ["dynamic-import-node"],
  "comments": true
}

jset.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  collectCoverage :true,
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    // process `*.vue` files with `vue-jest`
    ".*\\.(vue)$": "vue-jest",

    // process js with `babel-jest`
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  collectCoverageFrom: [
    '**/*.{js,vue}',
    '!**/plugins/**',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
}

package.json

{
  "name": "web-application",
  "version": "1.0.0",
  "private": true,
  "description": "web-application",
  "author": "John",
  "scripts": {
    ...
    "test:unit": "vue-cli-service test:unit",
  },
  "dependencies": {
    ...
    "copy-webpack-plugin": "^4.6.0",
    "dotenv": "^8.1.0",
    "element-ui": "^2.10.0",
    "eslint-plugin-vue": "^5.2.3",
    "fs": "0.0.1-security",
    "log4js": "^5.0.0",
    "lottie-web": "^5.5.5",
    "pm2": "^3.5.1",
    "recordrtc": "^5.5.8",
    "request": "^2.88.0",
    "sweetalert2": "^8.13.0",
    "vue": "^2.6.10",
    "vue-croppie": "^1.3.13",
    "vue-drag-select": "^0.1.5",
    "vue-izitoast": "^1.2.1",
    "vue-moment": "^4.0.0",
    "vue-raven": "^1.0.3",
    "vue-router": "^3.1.3",
    "vue-tilt.js": "^1.0.2",
    "vue-toasted": "^1.1.27",
    "vue2-scrollbar": "0.0.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.4.5",
    "@vue/cli-plugin-unit-jest": "^4.2.3",
    "@vue/cli-service": "^4.2.3",
    "@vue/test-utils": "^1.0.0-beta.31",
    "babel-core": "^6.25.0",
    "babel-eslint": "^8.2.2",
    "babel-jest": "^25.2.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "crypto-js": "^3.1.9-1",
    "css-hot-loader": "^1.4.4",
    "css-loader": "^1.0.1",
    "es6-promise": "^4.2.8",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^6.5.0",
    "eslint-config-vue": "^2.0.2",
    "eslint-plugin-html": "^4.0.6",
    "eslint-plugin-prettier": "^3.1.1",
    "file-loader": "^1.1.11",
    "file-saver": "^1.3.8",
    "glob": "^7.1.4",
    "html-loader": "^0.5.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pkg": "^4.4.0",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^7.1.0",
    "secure-web-storage": "^1.0.2",
    "style-loader": "^0.18.2",
    "url-loader": "^1.1.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-axios": "^2.1.4",
    "vue-i18n": "^8.11.2",
    "vue-jest": "^3.0.5",
    "vue-loader": "^14.2.2",
    "webpack": "^4.39.3",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  },
  "bin": {
    "app": "./server.js"
  },
  "lint": "eslint --ext .js,.vue src",
  "pkg": {
    "assets": [
      "dist/**/*"
    ]
  }
}

如果你需要更多的信息，请告诉我。我会加进去的。

谢谢你阅读这个问题。

Answer 1

这是自我回答。这是个愚蠢的问题。

有三个问题

1. preset: '@vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform选项无用

- removed

​

1. Jest 24不支持babel 6.

- it should be `babel-jest": "^23.6.0"`

​

1. transform的位置是错误的

- it should be like

​

  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  }

现在我解决了三个问题。而且工作得很好。

我离开这个答案是因为我希望我可耻的行为能帮助别人。