Prueba de componentes simples de JavaScript Vue sin Vue CLI

Question

¿Es posible probar componentes de Vue que se desarrollaron en javascript simple sin una configuración de Vue CLI / Webpack / Babel?

La documentación sobre el tema que encontré hasta ahora en la Web es bastante escasa:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Cómo probar componentes simples de Vue (no componentes de un solo archivo)

Instalé Vue, Vue test utils, JSDOM

Mi paquete.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 funciona bien con funciones js simples, pero no he logrado probar un componente de Vue.

El contenido de mi prueba

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

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

El resultado de la prueba

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

Por favor ayuda !

Answer 1

Tuvimos un problema similar hace 2 meses. Un caso de uso ligeramente diferente, pero para nosotros la dependencia de VueCLI en específico fue el culpable. Sin él, no encontramos forma de ejecutar con éxito ni siquiera las pruebas básicas.

Creo que si quieres seguir este camino, es posible que tengas que trabajar mucho sin pasar por los mecanismos previstos. Para eso, debe responderse a sí mismo si vale la pena su tiempo. Nos decidimos por VueCLI y dimos por sentado los gastos generales.

Answer 2

Probé esto hace un año, donde me encontré con una situación similar en la que no quiero usar CLI / webpack.

Espero que pueda aportar alguna contribución para resolver su consulta.

Para probar su componente sin paquete web, puede usar el complemento http-vue-loader .

El flujo de trabajo del complemento es simple

1. http solicita el archivo vue
2. cargar el archivo vue en un fragmento de documento
3. procesar cada sección (plantilla, guión y estilo)
4. devolver una promesa a Vue.js (componentes asíncronos)
5. luego Vue.js compila y almacena en caché el componente

En realidad, el objetivo principal del complemento es probar rápidamente los vuecomponentes sin ningún paso de compilación. Sin embargo, para la producción, recomiendo usar el paquete de módulos webpack con vue-loader.

Consulte un ejemplo aquí