Testen von einfachen Javascript-Vue-Komponenten ohne Vue-CLI

Question

Ist es möglich, Vue-Komponenten zu testen, die in einfachem Javascript ohne ein Vue CLI / Webpack / Babel-Setup entwickelt wurden?

Die Dokumentation zu dem Subjet, den ich bisher im Web gefunden habe, ist ziemlich schmal:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• So testen Sie einfache Vue-Komponenten (keine einzelnen Dateikomponenten)

Ich habe Vue, Vue Test Utils und JSDOM installiert

Mein 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 läuft gut mit einfachen js-Funktionen, aber ich habe es nicht geschafft, eine Vue-Komponente zu testen.

Der Inhalt meines Tests

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

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

Das Testergebnis

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

Bitte helfen Sie!

Answer 1

Wir hatten vor 2 Monaten ein ähnliches Problem. Ein etwas anderer Anwendungsfall, aber für uns war die Abhängigkeit von VueCLI im Einzelnen der Schuldige. Ohne sie konnten wir nicht einmal grundlegende Tests erfolgreich durchführen.

Ich denke, wenn Sie diesen Weg gehen wollen, müssen Sie möglicherweise viel Arbeit unter Umgehung der beabsichtigten Mechanismen leisten. Dafür müssen Sie sich selbst antworten, wenn das Ihre Zeit wert ist. Wir sind mit dem VueCLI gefahren und haben den Overhead für selbstverständlich gehalten.

Answer 2

Ich habe dies vor einem Jahr versucht, als ich auf eine ähnliche Situation stieß, in der ich CLI / Webpack nicht verwenden möchte.

Ich hoffe, es kann einen Beitrag zur Lösung Ihrer Anfrage leisten.

Um Ihre Komponente ohne Webpack zu testen, können Sie das http-vue-loader- Plugin verwenden.

Der Plugin-Workflow ist einfach

1. http Fordern Sie die Vue-Datei an
2. Laden Sie die Vue-Datei in ein Dokumentfragment
3. jeden Abschnitt verarbeiten (Vorlage, Skript und Stil)
4. ein Versprechen an Vue.js zurückgeben (asynchrone Komponenten)
5. dann kompiliert Vue.js die Komponente und speichert sie zwischen

Tatsächlich besteht der Hauptzweck des Plugins darin, vueKomponenten ohne Kompilierungsschritt schnell zu testen . Für die Produktion empfehle ich jedoch, den Webpack-Modul-Bundler mit Vue-Loader zu verwenden.

Hier finden Sie ein Beispiel