Testing plain javascript Vue components without Vue CLI

user_3934558 0
Viewed 1146

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 :

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)

enter image description here

Please help !

visual-studio-2017 vue-test-utils jestjs components testing
2 Answers

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.

user_66726790

I have tried this a year ago, where i came across the similar situation where I do not want to use CLI/webpack.

Hope fully it can add some contribution in solving your query.

To test your component without webpack you can use http-vue-loader plugin.

The plugin workflow is simple

  1. http request the vue file
  2. load the vue file in a document fragment
  3. process each section (template, script and style)
  4. return a promise to Vue.js (async components)
  5. then Vue.js compiles and cache the component

Actually the main purpose of plugin is to quickly test vue components without any compilation step. However, for production, I recommend to use webpack module bundler with vue-loader.

Refer to a Example here

user_139474070
Related