Test des composants Vue avec du cyprès

Cypress, un coureur de test automatisé robuste pour les applications basées sur le navigateur, prend désormais en charge les tests de composants. Cet article explore l'intégration des tests de composants Cypress dans une application Vue à grande échelle, mettant en évidence les meilleures pratiques et relevant des défis courants. Notre équipe, auparavant utilisant des tests de tests et de VUE, est passé à Cypress pour son environnement de test basé sur un navigateur et son intégration transparente avec des tests de bout en bout existants.

Remarque: Cet article reflète la fonctionnalité Cypress 8. Attendez-vous à des changements potentiels dans les futures mises à jour.

Structure de test des composants: un exemple pratique

Considérez un composant "Politique de confidentialité" avec un bouton de titre, de corps et de reconnaissance. Cliquer sur le bouton émet un événement "Confirmer". Un test de composant Cypress peut ressembler à ceci:

 import {mont} depuis '@ cypress / vue';
importer privacypolicytotice de './privacypolicytotice.vue';

décrire ('privacypolicytice', () => {
  it ('rend le titre', () => {
    Mount (privacypolicytotice);
    cy.Contains («H1», «Politique de confidentialité»). devrait («être.Visible»);
  });

  it ('émet un événement "Confirmer" sur le bouton cliquer', () => {
    Mount (privacypolicytotice);
    cy.Contains ('Button', '/ ^ ok /')
      .Click ()
      .vue ()
      .Then ((wrapper) => {
        attendre (wrapper.emis ('confirm')). To.have.length (1);
      });
  });
});

Ce test vérifie à la fois les éléments d'interface utilisateur (UI) et les événements de l'interface du développeur (API), testant implicitement la structure et l'accessibilité des composants. L'échange du bouton contre un div, par exemple, mettrait immédiatement mettre en évidence les problèmes d'accessibilité.

Stratégie de test: une approche en couches

Notre stratégie de test distingue:

• Tests unitaires: vérifiez le comportement de la fonction individuelle.
• Tests des composants: isolez les composants de l'interface utilisateur, vérifiant les interactions utilisateur et développeur.
• Tests de bout en bout: testez l'ensemble des fonctionnalités de l'application du point de vue d'un utilisateur.
• Tests d'intégration: tester l'interaction de plusieurs pièces d'application (une catégorie plus large).

Les tests des composants, en particulier, se concentrent sur la vérification des événements attendus (contrat du développeur) et de la réflexion sur l'état de l'interface utilisateur (contrat utilisateur). Ils servent également de documentation des composants précieux.

CYPRESS Vs. JEST / VUE TEST UTILS: Une analyse comparative

Bien que les utilisations de tests et de VUE soient couramment utilisés pour les tests de composants, Cypress offre des avantages en exécutant des tests dans un environnement de navigateur réel. Cela fournit des commentaires visuels, des capacités de débogage et une interaction API réaliste du navigateur. Cypress exploite Vue Test Utils pour le montage des composants et les assertions spécifiques au cadre.

Mise en œuvre pratique et défis

Notre grande application Vue 2 avec Vuetify a présenté plusieurs défis:

• Intégration Vuetify: une commande Cypress personnalisée a été créée pour monter les composants avec une instance VueTify préconfigurée, assurant un style et un comportement corrects. Cela impliquait d'ajouter les classes et les attributs nécessaires à l'élément racine Cypress ( __cy_root ).
• Organisation de fichiers de spécifications: un modèle GLOB ( !(node_modules)**/*.spec.js ) a été utilisé dans cypress.json pour localiser les fichiers de test aux côtés des composants, à l'exclusion des fichiers non pertinents.
• Conflits de fichier de commande: séparation des commandes de test des composants des commandes de test de bout en bout a empêché les conflits.
• Accéder à l'emballage Vue: une commande Cypress personnalisée ( cy.vue() ) simplifie l'accès au wrapper Vue Test Utils pour les assertions.

Leçons apprises et meilleures pratiques

Tout en rencontrant initialement des hoquets mineurs (par exemple, des erreurs de linter intermittentes), les avantages l'emportent sur les défis. L'approche de test cohérente à différents niveaux et la capacité de développer et de tester visuellement les composants isolés sont des avantages significatifs. Le choix des composants simples et moins dépendants pour les tests initiaux est recommandé.

Conclusion

Le test de composants Cypress fournit une approche robuste et conviviale, complétant les tests de bout en bout existants. Tout en nécessitant une familiarité avec plusieurs outils (Vue Test Utils, Cypress, Mocha, Chai, etc.), la nature intégrée de Cypress simplifie le processus de test global. La lisibilité des tests améliorée et la couverture accrue des tests au sein de notre équipe mettent en évidence son efficacité.

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!