Testowanie zwykłych komponentów javascript Vue bez Vue CLI

Question

Czy można przetestować komponenty Vue, które zostały opracowane w zwykłym javascript bez konfiguracji Vue CLI / Webpack / Babel?

Dokumentacja dotycząca wątku, który znalazłem do tej pory w sieci, jest dość wąska:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Jak testować zwykłe komponenty Vue (nie komponenty jednoplikowe)

Zainstalowałem Vue, narzędzia testowe Vue, JSDOM

Mój pakiet.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 działa dobrze z prostymi funkcjami js, ale nie udało mi się przetestować komponentu Vue.

Treść mojego testu

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

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

Wynik testu

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

Proszę pomóż !

Answer 1

Podobny problem mieliśmy 2 miesiące temu. Nieco inny przypadek użycia, ale dla nas przyczyną była zależność od VueCLI w szczególności. Bez tego nie znaleźliśmy sposobu na pomyślne przeprowadzenie nawet podstawowych testów.

Myślę, że jeśli chcesz iść tą drogą, być może będziesz musiał wykonać dużo pracy omijając zamierzone mechanizmy. W tym celu musisz sobie odpowiedzieć, czy jest to warte twojego czasu. Poszliśmy z VueCLI i przyjęliśmy koszty ogólne za pewnik.

Answer 2

Próbowałem tego rok temu, gdzie natknąłem się na podobną sytuację, w której nie chcę używać CLI / webpacka.

Mam nadzieję, że w pełni przyczyni się do rozwiązania twojego zapytania.

Aby przetestować swój komponent bez webpacka, możesz użyć wtyczki http-vue-loader .

Przepływ pracy wtyczki jest prosty

1. http zażądać pliku vue
2. załaduj plik vue do fragmentu dokumentu
3. przetworzyć każdą sekcję (szablon, skrypt i styl)
4. zwrócić obietnicę do Vue.js (komponenty asynchroniczne)
5. następnie Vue.js kompiluje i buforuje komponent

Właściwie głównym celem wtyczki jest szybkie testowanie vuekomponentów bez żadnego kroku kompilacji. Jednak do produkcji polecam użycie bundlera modułów webpack z vue-loaderem.

Zobacz przykład tutaj