Test di componenti Vue javascript semplici senza Vue CLI

Question

È possibile testare componenti Vue che sono stati sviluppati in semplice javascript senza una configurazione Vue CLI / Webpack / Babel?

La documentazione sull'argomento che ho trovato finora sul Web è piuttosto scarsa:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Come testare componenti Vue semplici (non componenti di file singoli)

Ho installato Vue, Vue test utils, JSDOM

Il mio 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 funziona bene con semplici funzioni js ma non sono riuscito a testare un componente Vue.

Il contenuto del mio test

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

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

Il risultato del test

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

Per favore aiuto !

Answer 1

Abbiamo avuto un problema simile 2 mesi fa. Un caso d'uso leggermente diverso, ma per noi la dipendenza da VueCLI in particolare era il colpevole. Senza di esso, non abbiamo trovato alcun modo per eseguire con successo anche i test di base.

Penso che se vuoi seguire questa strada, potresti dover fare molto lavoro bypassando i meccanismi previsti. Per questo devi rispondere da solo se vale il tuo tempo. Abbiamo scelto VueCLI e abbiamo dato per scontato il sovraccarico.

Answer 2

L'ho provato un anno fa, dove mi sono imbattuto in una situazione simile in cui non voglio usare CLI / webpack.

Spero pienamente che possa aggiungere qualche contributo nella risoluzione della tua domanda.

Per testare il tuo componente senza webpack puoi usare il plugin http-vue-loader .

Il flusso di lavoro del plugin è semplice

1. http richiede il file vue
2. caricare il file vue in un frammento di documento
3. elaborare ogni sezione (modello, script e stile)
4. restituire una promessa a Vue.js (componenti asincroni)
5. quindi Vue.js compila e memorizza nella cache il componente

In realtà lo scopo principale del plugin è quello di testare rapidamente i vuecomponenti senza alcun passaggio di compilazione. Tuttavia, per la produzione, consiglio di utilizzare il bundler del modulo webpack con vue-loader.

Fare riferimento a un esempio qui