Menguji komponen Vue javascript biasa tanpa Vue CLI

Question

Apakah mungkin untuk menguji komponen Vue yang dikembangkan dalam javascript biasa tanpa setup Vue CLI / Webpack / Babel?

Dokumentasi tentang subjet yang saya temukan sejauh ini di Web cukup tipis:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Cara menguji komponen Vue biasa (bukan komponen file tunggal)

Saya menginstal Vue, Vue test utils, JSDOM

Package.json saya:

{
  "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 berjalan dengan baik dengan fungsi js sederhana tetapi saya belum berhasil menguji komponen Vue.

Isi tes saya

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

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

Hasil tes

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

Tolong bantu !

Answer 1

Kami mengalami masalah serupa 2 bulan lalu. Kasus penggunaan yang sedikit berbeda tetapi bagi kami ketergantungan pada VueCLI secara spesifik adalah penyebabnya. Tanpanya, kami tidak menemukan cara untuk berhasil menjalankan bahkan tes dasar.

Saya rasa jika Anda ingin menempuh rute ini, Anda mungkin harus melakukan banyak pekerjaan melewati mekanisme yang dimaksudkan. Untuk itu Anda perlu menjawab sendiri jika itu sepadan dengan waktu Anda. Kami pergi dengan VueCLI dan mengambil overhead begitu saja.

Answer 2

Saya telah mencoba ini setahun yang lalu, di mana saya menemukan situasi serupa di mana saya tidak ingin menggunakan CLI / webpack.

Semoga sepenuhnya dapat menambah kontribusi dalam menyelesaikan pertanyaan Anda.

Untuk menguji komponen Anda tanpa webpack, Anda dapat menggunakan plugin http-vue-loader .

Alur kerja plugin sederhana

1. http meminta file vue
2. memuat file vue dalam sebuah fragmen dokumen
3. proses setiap bagian (template, script dan gaya)
4. mengembalikan janji ke Vue.js (komponen asinkron)
5. kemudian Vue.js mengkompilasi dan menyimpan komponen tersebut ke cache

Sebenarnya tujuan utama plugin adalah untuk menguji vuekomponen dengan cepat tanpa langkah kompilasi. Namun, untuk produksi, saya merekomendasikan untuk menggunakan bundler modul webpack dengan vue-loader.

Lihat Contoh di sini