Rédigez des tests unitaires Vue rapides ultra rapides avec Tape et Vue Test Utils

Tape and Vue - un mariage parfait

La bande est le cadre le plus rapide pour le test unitaire des composants Vue.

Dans cet article, nous verrons comment écrire des tests unitaires Vue avec Tape et Vue Test Utils.

Ce tutoriel est destiné aux utilisateurs familiarisés avec les tests unitaires. Si vous débutez dans le test unitaire, consultez les composants Vue de test unitaire pour débutants.

Quelle est la bande?

La bande est une structure de test unitaire sans structure qui produit le rapport de test au format TAP (Test Anything Protocol).

Une API simple permet d’affirmer que vos composants JavaScript et Vue se comportent correctement.

Pourquoi bande?

Il y a quelques semaines, j'ai effectué des tests de performance sur différents frameworks de test. Je voulais savoir quel framework était le plus rapide pour tester Vue SFC (Single File Components).

J'ai ajouté Tape par souci d'exhaustivité et j'ai été choqué de constater qu'il s'agissait du framework le plus rapide.

Pour exécuter des tests sur bande, nous devons procéder à une configuration. Let's plonger directement dans.

Démarrer le projet

J'ai fait un simple projet de départ pour commencer. Git clone le projet dans un répertoire:

clone git https://github.com/eddyerburgh/jest-vue-starter.git

Cd dedans et installe les dépendances:

cd jest-vue-starter && npm install

Exécutez le serveur de développement en tant que npm run dev pour consulter l'application.

C’est assez simple. L’intérêt principal de ce didacticiel est de voir comment configurer Tape et Vue, et non d’écrire des tests complexes.

Configuration des utilitaires Tape et Vue Test

La première chose à faire est d’installer Tape et Vue Test Utils:

npm installer --save-dev tape @ vue / test-utils

Vue Test Utils est en version bêta, nous devons donc demander explicitement la version

Vue Test Utils nécessite un environnement de navigateur pour s'exécuter. Cela ne signifie pas que nous devons exécuter les tests dans un navigateur (merci pleinement!).

Nous pouvons utiliser jsdom pour configurer un environnement de navigateur dans Node. Il ajoute des variables globales telles que document et window à Node.

jsdom est un peu difficile à installer. Heureusement, certains développeurs de nœuds entreprenants ont créé une bibliothèque de wrapper appelée browser-env.

npm install --save-dev browser-env

Nous devons exécuter browser-env avant les tests. La bande nous permet de définir les fichiers à exécuter avant les tests, nous le ferons dans une seconde.

Les SFC Vue doivent être compilés avant d’être testés. Nous pouvons utiliser require-hooks pour exécuter WebPack sur des fichiers lorsqu'ils sont requis dans Node. C’est une configuration simple.

Commencez par installer require-extension-hooks et ses variantes:

npm installer --save-dev require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue

Faisons le fichier de configuration dont j'ai parlé plus tôt. Créez un répertoire de test et ajoutez un fichier setup.js. Le dernier chemin sera test / setup.js.

Nous y sommes presque. Des trucs fous.

Écrivons un test de fumée dans Tape. Créez un nouveau fichier appelé List.spec.js dans le répertoire de test. Test de chemin complet / List.spec.js. Copiez le test ci-dessous dans le fichier:

Que se passe-t-il ici? Nous définissons un test et obtenons un objet t dans le rappel. L'objet t contient des méthodes d'assertion. Il a également une méthode de plan. Nous devons dire à Tape combien de tests il devrait s’attendre.

Nous avons maintenant besoin d’un script pour exécuter les tests. Ouvrez le package.json et ajoutez ce script:

"unité": "tape ./test/specs/*.spec.js -r ./test/setup.js"

Cela indique à la bande d’exécuter tous les fichiers .spec dans test / specs. Le -r indique à Tape d'exiger ou d'exécuter un test / une configuration avant d'exécuter nos tests.

Exécutez les tests unitaires:

unité d'exécution npm

Oui, nous avons un test de réussite. Mais hoo boy, c’est une mauvaise sortie de test

Rappelez-vous que j'ai mentionné TAP plus tôt? C’est TAP dans sa gloire nue. Assez moche non? Ne vous inquiétez pas, nous pouvons l’embellir.

Installez tap-spec:

npm install --save-dev tap-spec

Nous pouvons canaliser notre sortie TAP à partir de la bande. Editez le script d'unité pour diriger la sortie vers tap-spec:

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

Et relancez les tests:

unité d'exécution npm

Beaucoup mieux

Écrire des tests avec Tape et Vue Test Utils

Écrivons quelques tests alors. Puisque nous utilisons Vue Test Utils, les tests sont assez lisibles.

Dans List.spec.js, nous allons écrire un test qui passe un tableau d’éléments à List. Nous allons utiliser la méthode peu profonde de Vue Test Utils pour monter le composant peu profond. shallow renvoie un wrapper contenant le composant monté. Nous pouvons utiliser findAll pour rechercher dans l’arbre de rendu les balises

  • et en vérifier le nombre.

    Copiez le test ci-dessous dans test / specs / List.spec.js.

    Regardez les tests réussir avec npm run unit. Notez que nous avons un message d'erreur personnalisé pour l'assertion out t.equals. Les messages par défaut ne sont pas très lisibles, il est donc préférable d’ajouter les nôtres.

    Ajoutez maintenant un nouveau fichier test / specs / MessageToggle.spec.js. Ici, nous allons écrire un test pour, vous l’avez deviné, MessageToggle.vue.

    Nous allons écrire deux tests maintenant. On vérifiera si la balise

    rend un message par défaut. Nous allons à nouveau utiliser peu profonde pour obtenir un wrapper contenant le composant monté et utiliser la méthode text pour renvoyer le texte contenu dans la balise

    .

    Le deuxième test est similaire. Nous affirmerons que le message change lorsque vous appuyez sur le bouton de basculement du message. Pour ce faire, nous pouvons utiliser la méthode du déclencheur.

    Copiez le code ci-dessous dans test / specs / MessageToggle.spec.js:

    Exécutez à nouveau les tests avec npm run unit. Woop - tests verts

    Avantages et inconvénients de la bande

    Maintenant que nous avons ajouté quelques tests, voyons les avantages et les inconvénients de l’utilisation de Tape.

    Avantages

    • C'est rapide
       Comme très vite
    • C'est simple
       Vous pouvez lire le code source pour
    • Il utilise TAP.
      Comme TAP est une norme, de nombreux programmes fonctionnent directement avec TAP.
      Comme le module tap-spec, nous venons d'y ajouter du texte TAP et il l'a prettifié
    • Assertions limitées
       Les assertions limitées gardent vos assertions faciles à comprendre

    Les inconvénients

    • Assertions limitées
       C'est un con aussi
      Vous pouvez obtenir des messages d'erreur utiles avec des assertions comme hasBeenCalledWith, difficile à reproduire avec t.equal
    • Ça casse
      Lorsque vous exécutez plus de 10000 tests
      Vous n’allez probablement pas toucher ça. Mais cela pourrait être un facteur décisif pour un grand projet Vue
    • C’est fondamental
       Vous devrez utiliser d’autres bibliothèques pour vous moquer, vous écraser et faire semblant.

    Les avantages et les inconvénients sont assez similaires. La bande est fondamentale, et cela peut être une bonne ou une mauvaise chose, selon qui vous le demandez.

    Mais surtout, c’est très rapide!

    Les tests unitaires rapides sont de bons tests unitaires.

    Appel à l'action

    La meilleure façon de concevoir un nouveau cadre de test est de l'utiliser.

    Sur le prochain projet Vue que vous démarrez, essayez Tape. Vous pouvez trouver une liste des assertions sur le fichier README.

    Profitez

    Vous pouvez trouver le rapport final sur GitHub.