Explication détaillée des étapes pour créer un environnement de test unitaire vue2 à l'aide de karma+mocha+webpack3

Cette fois, je vais vous apporter une explication détaillée des étapes d'environnement pour utiliser karma+mocha+webpack3 pour construire vue2test unitaire, et des notes pour utiliser karma+mocha+webpack3 pour créer un environnement de test unitaire vue2. Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

J'ai trouvé de nombreux exemples sur Internet concernant les tests unitaires. Ils expliquent tous comment ajouter des tests unitaires lors de la création d'un nouveau projet, mais mon projet a été généré et ne peut pas l'être. réinitialisé à nouveau. À l'heure actuelle, il existe de nombreux pièges dans la façon d'ajouter des tests unitaires. J'écrirai mon expérience ici.

1. Utilisez vue-cli pour générer un nouveau projet et copiez les fichiers requis pour les tests unitaires directement dans votre projet

vue init webpack vuetest

Téléchargement du fichierAdresse du code source Lien Github

2. Installez le module Karma+Mocha. J'ai rencontré un écueil et j'ai découvert qu'un certain module manquait après une longue période de résolution du problème. problème. Ici, listez tous les modules requis

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader

3. Modifiez package.json et ajoutez le code de démarrage dans les scripts (remplacez s'il y a une unité)

"unit": "karma start test/unit/karma.conf.js --single-run",

4. répertoire Le fichier index.js ci-dessous. C'est le plus gros piège que j'ai rencontré. Il m'a fallu beaucoup de temps pour le résoudre, mais cela provoquait toujours une erreur dans le fichier .scss.

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)

remplacé par :

const srcContext = require.context('../../src', true, /^\.\/(style$) /)

5. Vous pouvez copier le fichier de projet généré par vue-cli pour le tester, comme indiqué ci-dessous, et configurez-le Routage, testez si le module de test unitaire est installé avec succès

Exécutez la commande suivante dans le projet pour démarrer le test unitaire

Routage

 npm run unit

, testez si le module de test unitaire est installé avec succès

6. 🎜>

En même temps, un rapport de test est généré dans test/unité/couverture. Ce qui précède est un exemple simple de test unitaire de vue. Enfin, le code source est fourni

Étude approfondie des documents de référence

Série d'apprentissage Vue.js six - Test unitaire Vue Notes d'étude Karma+Mocha

karma+webpack construction Vue unitaire environnement de test

karma+mocha+webpack3 build vue2 unitaire environnement de testArticles Vue liés à l'auteur

Contrôle des autorisations du système backend basé sur Vue2.0

[vue2.0-changement de skin basé sur elementui [thème personnalisé]](

https://

juejin.im/post/5aea98...

Internationalisation Vue traitement vue-i18n Et le projet bascule automatiquement entre le chinois et l'anglais Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois php. site Web

Lecture recommandée :

Explication détaillée des étapes pour mettre en évidence le li sélectionné dans la mise en œuvre de React

Explication détaillée de l'exemple d'algorithme de tri dans le front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!