0

Hello I'm new to vue and jest. I added jest to already existing vue project.

And I want get test coverage result from .js and .vue file.

But. It dosen't go well.

When I try run

vue-cli-service test:unit

Return below Error

Failed to collect coverage from D:\work\project\src\components\service\sidebar\partials\menu.vue

ERROR: Falsy value found in plugins

Here is my config files

.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/**/*"
    ]
  }
}

Please tell me if you need more information. I'll add it.

Thank you for read this question.

1 Answer 1

4

This is self answer. Well it was silly problem.

There are three problem

  1. preset: '@vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform option useless

    • removed
  2. Jest 24 dosen't support babel 6.

    • it should be babel-jest": "^23.6.0"
  3. transform's location was wrong

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

Now i fixed three problem. and working good.

I leave this answer because I want my shameful behavior to help others.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.