Testing plain javascript Vue components without Vue CLI

Question

Is it possible to test Vue components that were developped in plain javascript without a Vue CLI/Webpack/Babel setup?

The documentation on the subjet I found so far on the Web is pretty slim :

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• How to test plain Vue components (not single file components)

I installed Vue, Vue test utils, JSDOM

My package.json :

{
  "name": "GuichetUnique.CMS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jest": "^26.4.2",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.5",
    "jsdom": "16.4.0",
    "jsdom-global": "3.0.2"
  },
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Jest is running fine with simple js functions but I haven't manage to test a Vue component.

The content of my test

require('jsdom-global')();
var testUtils = require('@vue/test-utils'), Vue = require('vue');

testUtils.mount({ template: '<div>test</div>' });

The test result

TypeError: Illegal invocation at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)

Please help !

Answer 1

We've had a similar issue 2 months ago. A slightly different use case but for us the dependency on VueCLI in specific was the culprit. Without it, we found no way of successfully running even basic tests.

I think that if you want to go this route, you might have to do a lot of work bypassing the intended mechanisms. For that you need to answer yourself if that is worth your time. We went with the VueCLI and took the overhead for granted.