Тестирование простых JavaScript-компонентов Vue без Vue CLI

Question

Можно ли протестировать компоненты Vue, которые были разработаны на простом javascript, без настройки Vue CLI / Webpack / Babel?

Документация по теме, которую я нашел в Интернете, довольно скудна:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Как тестировать простые компоненты Vue (а не отдельные файловые компоненты)

Я установил Vue, Vue test utils, 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 отлично работает с простыми js-функциями, но мне не удалось протестировать компонент Vue.

Содержание моего теста

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

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

Результат теста

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

Пожалуйста помоги !

Answer 1

У нас была аналогичная проблема 2 месяца назад. Слегка другой вариант использования, но для нас виной всему была зависимость от VueCLI. Без него мы не смогли бы успешно провести даже базовые тесты.

Я думаю, что если вы хотите пойти по этому пути, вам, возможно, придется проделать большую работу в обход намеченных механизмов. Для этого вам нужно ответить себе, стоит ли это вашего времени. Мы выбрали VueCLI и приняли накладные расходы как должное.

Answer 2

Я пробовал это год назад, когда я столкнулся с аналогичной ситуацией, когда я не хочу использовать CLI / webpack.

Надеюсь, что это может внести некоторый вклад в решение вашего запроса.

Чтобы протестировать свой компонент без веб-пакета, вы можете использовать плагин http-vue-loader .

Рабочий процесс плагина прост

1. http запросить файл vue
2. загрузить файл vue во фрагмент документа
3. обрабатывать каждый раздел (шаблон, скрипт и стиль)
4. вернуть обещание в Vue.js (асинхронные компоненты)
5. затем Vue.js компилирует и кеширует компонент

Собственно, основная цель плагина - быстро протестировать vueкомпоненты без какого-либо этапа компиляции. Однако для производства я рекомендую использовать сборщик модулей webpack с vue-loader.

См. Пример здесь