Vue CLI olmadan düz javascript Vue bileşenlerini test etme

Question

Düz javascript ile geliştirilen Vue bileşenlerini Vue CLI / Webpack / Babel kurulumu olmadan test etmek mümkün müdür?

Şimdiye kadar Web'de bulduğum subjet ile ilgili belgeler oldukça zayıf:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Düz Vue bileşenleri nasıl test edilir (tek dosya bileşenleri değil)

Vue, Vue test araçları, JSDOM

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, basit js işlevleriyle sorunsuz çalışıyor ancak bir Vue bileşenini test etmeyi başaramadım.

Testimin içeriği

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

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

Test sonucu

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

Lütfen yardım et !

Answer 1

2 ay önce benzer bir sorun yaşadık. Biraz farklı bir kullanım örneği, ancak bizim için özellikle VueCLI'ye bağımlılık suçluydu. Bu olmadan, temel testleri bile başarılı bir şekilde çalıştırmanın bir yolunu bulamadık.

Bence bu rotaya gitmek istiyorsanız, amaçlanan mekanizmaları atlayarak çok fazla iş yapmanız gerekebilir. Bunun için zaman ayırmaya değip değmeyeceğini kendin cevaplamalısın. VueCLI ile gittik ve olağan bir şey için ek yükü aldık.

Answer 2

Bunu bir yıl önce denedim, CLI / webpack kullanmak istemediğim benzer bir durumla karşılaştım.

Umarım, sorgunuzu çözmede biraz katkı sağlayabilir.

Bileşeninizi web paketi olmadan test etmek için http-vue-loader eklentisini kullanabilirsiniz.

Eklenti iş akışı basittir

1. http vue dosyasını isteyin
2. vue dosyasını bir belge parçasına yükleyin
3. her bölümü işle (şablon, komut dosyası ve stil)
4. Vue.js'ye (eşzamansız bileşenler) bir söz vermek
5. daha sonra Vue.js bileşeni derler ve önbelleğe alır

Aslında eklentinin temel amacı, vuebileşenleri herhangi bir derleme adımı olmadan hızlı bir şekilde test etmektir . Bununla birlikte, üretim için, webpack modül paketleyicisini vue-loader ile kullanmanızı tavsiye ederim.

Burada bir Örneğe bakın