Test des composants Vue javascript simples sans Vue CLI

Question

Est-il possible de tester des composants Vue qui ont été développés en javascript simple sans une configuration Vue CLI / Webpack / Babel?

La documentation sur le sujet que j'ai trouvée jusqu'à présent sur le Web est assez mince:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Comment tester les composants simples de Vue (pas les composants de fichier unique)

J'ai installé Vue, utils de test Vue, JSDOM

Mon 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 fonctionne bien avec des fonctions js simples mais je n'ai pas réussi à tester un composant Vue.

Le contenu de mon test

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

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

Le résultat du test

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

Veuillez aider!

Answer 1

Nous avons eu un problème similaire il y a 2 mois. Un cas d'utilisation légèrement différent, mais pour nous, la dépendance à VueCLI en particulier était le coupable. Sans cela, nous n'avons trouvé aucun moyen d'exécuter avec succès des tests même de base.

Je pense que si vous voulez suivre cette voie, vous devrez peut-être faire beaucoup de travail en contournant les mécanismes prévus. Pour cela, vous devez vous répondre si cela vaut votre temps. Nous avons opté pour le VueCLI et avons pris les frais généraux pour acquis.

Answer 2

J'ai essayé cela il y a un an, où je suis tombé sur une situation similaire où je ne veux pas utiliser CLI / webpack.

J'espère pleinement qu'il pourra apporter une contribution à la résolution de votre requête.

Pour tester votre composant sans webpack, vous pouvez utiliser le plugin http-vue-loader .

Le flux de travail du plugin est simple

1. http demander le fichier vue
2. charger le fichier vue dans un fragment de document
3. traiter chaque section (modèle, script et style)
4. renvoyer une promesse à Vue.js (composants asynchrones)
5. puis Vue.js compile et cache le composant

En fait, le but principal du plugin est de tester rapidement les vuecomposants sans aucune étape de compilation. Cependant, pour la production, je recommande d'utiliser le bundler de module webpack avec vue-loader.

Reportez-vous à un exemple ici