Supercharge Testing React Applications avec Wallaby.js

À propos de l'auteur

Kelvin est un éditeur de logiciels indépendant qui construit actuellement Sailscasts – une plate-forme pour apprendre le JavaScript côté serveur. Il est également rédacteur technique et…
En savoir plus sur
Kelvin
…

Une chose que vous découvrirez très rapidement lorsque vous commencerez à écrire des tests pour une application est que vous voulez exécuter vos tests en permanence lorsque vous codez. Le fait de devoir basculer entre votre éditeur de code et la fenêtre du terminal (ou dans le cas de VS Code, le terminal intégré) ajoute une surcharge et réduit votre productivité au fur et à mesure que vous construisez votre application. Dans un monde idéal, vous auriez un retour instantané sur vos tests directement dans votre éditeur au fur et à mesure que vous écrivez votre code. Entrez Wallaby.js.

Qu'est-ce que Wallaby.js?

Wallaby.js est un lanceur de tests intelligent pour JavaScript qui exécute vos tests en continu. Il signale la couverture du code et d'autres résultats directement à votre éditeur de code dès que vous modifiez votre code (même sans enregistrer le fichier). L'outil est disponible en tant qu'extension d'éditeur pour VS Code, les éditeurs IntelliJ (tels que WebStorm et IntelliJ IDEA), Atom, Sublime Text et Visual Studio.

Pourquoi Wallaby.js?

Comme indiqué précédemment, Wallaby.js vise à améliorer votre productivité dans le développement quotidien de JavaScript. En fonction de votre flux de travail de développement, Wallaby peut vous faire gagner des heures à chaque fois
semaine en réduisant le changement de contexte. Wallaby fournit également des rapports de couverture de code, des rapports d'erreurs et d'autres fonctionnalités permettant de gagner du temps telles que le débogage de voyages dans le temps et les histoires de test.

Premiers pas avec Wallaby.js dans VS Code

Voyons comment nous pouvons tirer profit de Wallaby.js utilisant VS Code.

Remarque: Si vous n'utilisez pas VS Code, vous pouvez consulter ici pour obtenir des instructions sur la configuration pour d'autres éditeurs.

Installer The Wallaby.js VS Extension de code

Pour commencer, nous installerons l'extension Wallaby.js VS Code .

Une fois l'extension installée, le moteur d'exécution de Wallaby.js sera automatiquement téléchargé et installé.

Licence Wallaby

Wallaby fournit une licence Open Source pour les projets open source cherchant à utiliser Wallaby.js. Visitez ici pour obtenir une licence open source. Vous pouvez utiliser la licence open-source avec le dépôt de démonstration pour cet article .

Vous pouvez également obtenir une licence d'essai de 15 jours entièrement fonctionnelle en visitant ici .

Si vous souhaitez utiliser Wallaby.js sur un projet non open source au-delà de la période de licence d'essai de 15 jours, vous pouvez obtenir une clé de licence sur le site Web de wallaby .

Add License Key To VS Code

Après avoir obtenu une clé de licence, dirigez-vous vers VS Code et dans la palette de commandes recherchez "Wallaby.js: Manage License Key", cliquez sur la commande et une zone de saisie vous sera présentée pour entrer votre clé de licence , puis appuyez sur Entrée et vous recevrez une notification indiquant que Wallaby.js a été activé avec succès.

Wallaby.js Et React

Maintenant que Wallaby.js est configuré dans notre éditeur de code VS, testons un React application avec Wallaby.js.

Pour notre application React, nous ajouterons une simple fonction de vote positif / négatif et nous écrirons quelques ts pour notre nouvelle fonctionnalité pour voir comment Wallaby.js joue dans le mix.

Création de l'application React

Remarque : Vous pouvez cloner le dépôt de démonstration si vous le souhaitez, ou vous pouvez suivre ci-dessous.

Nous allons créer notre application React en utilisant l'outil CLI create-react-app.

 npx create-react-app wallaby-js-demo

Ensuite, ouvrez le projet React nouvellement échafaudé dans VS Code.

Ouvrez src / App.js et démarrez Wallaby.js en exécutant: "Wallaby.js: Start" dans la palette de commandes VS Code ( vous pouvez également utiliser la combinaison de raccourcis – Ctrl + Shift + R R si vous êtes sur une machine Windows ou Linux, ou Cmd + Shift + R R si vous êtes sur un Mac).

Lorsque Wallaby.js démarre, vous devriez voir ses indicateurs de couverture de test à gauche de votre éditeur similaires à la capture d'écran ci-dessous:

Wallaby.js fournit 5 indicateurs colorés différents dans la marge gauche de votre c Editeur d'ode:

1. Gris: signifie que la ligne de code n'est exécutée par aucun de vos tests.
2. Jaune: signifie qu'une partie du code d'une ligne donnée a été exécutée mais d'autres ne l'ont pas été.
3. Vert : signifie que tout le code d'une ligne a été exécuté par vos tests.
4. Rose: signifie que la ligne de code est sur le chemin d'exécution d'un test qui a échoué.
5. Rouge: signifie que la ligne de code est le source d'une erreur ou d'une attente échouée, ou dans la pile d'une erreur.

Si vous regardez la barre d'état, vous verrez les métriques Wallaby.js pour ce fichier et cela montre que nous avons une couverture de test de 100% pour src / App.js et un seul test de réussite sans échec du test. Comment Wallaby.js le sait-il? Lorsque nous avons lancé Wallaby.js, il a détecté que src / App.js a un fichier de test src / App.test.js il exécute ensuite ces tests en arrière-plan pour nous et de manière pratique nous donne les commentaires en utilisant ses indicateurs de couleur et nous donne également une métrique récapitulative sur nos tests dans la barre d'état.

Lorsque vous ouvrez également src / App.test.js vous verrez des commentaires similaires de Wallaby .js

Actuellement, tous les tests réussissent pour le moment donc nous obtenons tous les indicateurs verts. Voyons comment Wallaby.js gère les tests échoués. Dans src / App.test.js faisons échouer le test en changeant l'attente du test comme ceci:

 // src / App.test.js
expect (linkElement) .not.toBeInTheDocument ();

La capture d'écran ci-dessous montre à quoi ressemblerait votre éditeur avec src / App.test.js open:

Grand aperçu )

Vous verrez les indicateurs passer au rouge et au rose pour les tests échoués. Notez également que nous n'avons pas eu à enregistrer le fichier pour Wallaby.js pour détecter que nous avons fait une modification.

Vous remarquerez également la ligne dans votre éditeur dans src / App.test.js qui affiche l'erreur du test. Ceci est fait grâce à la journalisation avancée Wallaby.js . Grâce à la journalisation avancée de Wallaby.js, vous pouvez également signaler et explorer les valeurs d'exécution à côté de votre code en utilisant console.log un format de commentaire spécial //? et la commande VS Code, ] Wallaby.js: Afficher la valeur .

Voyons maintenant le flux de travail Wallaby.js pour corriger les tests échoués. Cliquez sur l'indicateur de test Wallaby.js dans la barre d'état pour ouvrir la fenêtre de sortie Wallaby.js. («✗ 1 ✓ 0»)

Dans la fenêtre de sortie de Wallaby.js, juste à côté du test qui a échoué, vous devriez voir un lien «Debug Test». Appuyer sur Ctrl et cliquer sur ce lien lancera le débogueur de voyage dans le temps Wallaby.js . Lorsque nous faisons cela, la fenêtre Outils Wallaby.js s'ouvrira sur le côté de votre éditeur, et vous devriez voir la section Débogueur Wallaby.js ainsi que les sections Explorateur de valeurs et Couverture des fichiers de test.

Si vous voulez voir la valeur d'exécution d'une variable ou d'une expression, sélectionnez la valeur dans votre éditeur et Wallaby.js l'affichera pour vous.

Notez également le lien «Open Test Story» dans la fenêtre de sortie. L'histoire de test Wallby.js vous permet de voir tous vos tests et le code qu'ils testent dans une seule vue dans votre éditeur.

Voyons cela en action. Appuyez sur Ctrl et cliquez sur le lien – vous devriez pouvoir voir l'histoire du test Wallaby.js s'ouvrir dans votre éditeur. La visionneuse d'histoires de test de Wallaby offre un moyen unique et efficace d'inspecter le code que votre test exécute dans une seule vue logique.

Une autre chose que nous allons explorer avant de corriger notre échec de test est l'application Wallaby.js. Notez le lien dans la fenêtre de sortie de Wallaby.js: «Launch Coverage & Test Explorer». Cliquez sur le lien pour lancer l'application Wallaby.js qui vous donnera une vue d'ensemble compacte de tous les tests de votre projet.

Ensuite, cliquez sur le lien et démarrez l'application Wallaby.js dans votre navigateur par défaut via http: // localhost: 51245 / . Wallaby.js détectera rapidement que notre projet de démonstration est ouvert dans notre éditeur qui le chargera ensuite automatiquement dans l'application.

Voici à quoi devrait ressembler l'application:

Vous devriez pouvoir voir les métriques du test dans la partie supérieure de l'application Wallaby.js. Par défaut, l'onglet Tests de l'application est ouvert. En cliquant sur l'onglet Fichiers vous devriez pouvoir voir les fichiers de votre projet ainsi que leurs rapports de couverture de test.

De retour sur l'onglet Tests cliquez sur le test et vous devriez voir le Wallaby.js Fonction de rapport d'erreurs à droite:

Maintenant que nous avons couvert tout cela, revenez à l'éditeur et corrigez le test qui a échoué pour rendre Wallaby.js heureux en rétablissant la ligne que nous avons modifiée précédemment en ceci:

 expect (linkElement) .toBeInTheDocument ();

La fenêtre de sortie de Wallaby.js devrait maintenant ressembler à la capture d'écran ci-dessous et vos indicateurs de couverture de test devraient tous passer maintenant.

Implémentation de notre fonctionnalité

Nous avons exploré Wallaby.js dans l'application par défaut créée pour nous par create-react-app . Implémentons notre fonction de vote positif / négatif et écrivons des tests pour cela.

L'interface utilisateur de notre application doit contenir deux boutons, l'un pour le vote positif et l'autre pour le vote défavorable et un seul compteur qui sera incrémenté ou décrémenté en fonction du bouton sur lequel l'utilisateur clique. Modifions src / App.js pour qu'il ressemble à ceci.

 // src / App.js
import React, {useState} de 'react';
importer le logo depuis './logo.svg';
import './App.css';

function App () {
  const [vote, setVote] = useState (0);

  function upVote () {
    setVote (vote + 1);
  }

  function downVote () {
    // Notez l'erreur, nous la corrigerons plus tard ...
    setVote (vote - 2);
  }
  revenir (
    

      

        
        

           {vote}
        
        

          
            
               👍🏿
            
          
          
            
               👎🏿
            
          
        
      
    
  );
}

exporter l'application par défaut;

Nous allons également styliser un peu l'interface utilisateur. Ajoutez les règles suivantes à src / index.css

 .votes {
  affichage: flex;
  justify-content: espace entre;
}
p.vote {
  taille de la police: 4rem;
}
bouton {
  rembourrage: 2rem 2rem;
  taille de la police: 2rem;
  bordure: 1px solide #fff;
  marge gauche: 1rem;
  rayon de la bordure: 100%;
  transition: tous les 300 ms;
  curseur: pointeur;
}

bouton: focus,
bouton: survoler {
  contour: aucun;
  filtre: luminosité (40%);
}

Si vous regardez src / App.js vous remarquerez quelques indicateurs gris de Wallaby.js nous indiquant qu’une partie de notre code n’est pas encore testée. De plus, vous remarquerez que notre test initial dans src / App.test.js échoue et que l'indicateur de la barre d'état de Wallaby.js montre que notre couverture de test a chuté.

Ces indices visuels de Wallaby.js sont pratiques pour le développement piloté par les tests (TDD) puisque nous obtenons instantanément Commentaires sur l'état de notre application concernant les tests.

Test de notre code d'application

Modifions src / App.test.js pour vérifier que l'application s'affiche correctement.

Remarque : Nous utiliserons la bibliothèque de test de réaction pour notre test qui sort de la boîte lorsque vous exécutez create-react-app . Consultez la documentation pour le guide d'utilisation.

Nous allons avoir besoin de quelques fonctions supplémentaires de @ testing-library / react mettez à jour votre @testing -library / react importer vers:

 import {render, fireEvent, cleanup} depuis '@ testing-library / react';

Remplaçons ensuite le test unique dans src / App.js par:

 test ('App renders correctement', () => {render ();});

Immédiatement, vous verrez l'indicateur passer au vert dans la ligne src / App.test.js où nous testons le rendu de l'application et aussi où nous appelons render dans notre src /App.js[19459051Often[19659108Captured'écrandufichierApptestjsouvertdansunéditeuraffichantdesindicateursverts"/>

Ensuite, nous allons tester cela la valeur initiale de l'état vote est zéro (0).

 it ('Le décompte des votes commence à 0', () => {
  const {getByTitle} = render ();
  const voteElement = getByTitle ('nombre de votes');
  expect (voteElement) .toHaveTextContent (/ ^ 0 $ /);
});

Ensuite, nous testerons si le fait de cliquer sur le bouton upvote 👍🏿 incrémente le vote:

 it ('Vote increments by 1 when upVote button is pressing', () => {
  const {getByTitle} = render ();
  const upVoteButtonElement = getByTitle ('upVote');
  const voteElement = getByTitle ('nombre de votes');
  fireEvent.click (upVoteButtonElement);
  expect (voteElement) .toHaveTextContent (/ ^ 1 $ /);
});

Nous testerons également l'interaction downvote 👎🏿 comme ceci:

 it ('Vote décrémente de 1 lorsque le bouton downVote est enfoncé', () => {
  const {getByTitle} = render ();
  const downVoteButtonElement = getByTitle ('downVote');
  const voteElement = getByTitle ('nombre de votes');
  fireEvent.click (downVoteButtonElement);
  expect (voteElement) .toHaveTextContent (/ ^ - 1 $ /);
});

Oups, ce test échoue. Voyons pourquoi. Au-dessus du test, cliquez sur le lien View story code lens ou sur le lien Debug Test dans la fenêtre de sortie de Wallaby.js et utilisez le débogueur pour accéder au downVote ] une fonction. Nous avons un bogue… nous aurions dû décrémenter le nombre de votes de 1 mais à la place, nous décrémentons de 2. Corrigeons notre bogue et décrémentons de 1.

 src / App.js
function downVote () {
    setVote (vote - 1);
}

Regardez maintenant comment les indicateurs de Wallaby passent au vert et nous savons que tous nos tests réussissent:

Notre src / App.test.js devrait ressembler à ceci:

 import React from ' réagir';
import {render, fireEvent, cleanup} depuis '@ testing-library / react';
importer l'application depuis './App';

test ('L'application s'affiche correctement', () => {
  rendu ();
});

it ('Le décompte des votes commence à 0', () => {
  const {getByTitle} = render ();
  const voteElement = getByTitle ('nombre de votes');
  expect (voteElement) .toHaveTextContent (/ ^ 0 $ /);
});

it ('Le nombre de votes augmente de 1 lorsque le bouton upVote est enfoncé', () => {
  const {getByTitle} = render ();
  const upVoteButtonElement = getByTitle ('upVote');
  const voteElement = getByTitle ('nombre de votes');
  fireEvent.click (upVoteButtonElement);
  expect (voteElement) .toHaveTextContent (/ ^ 1 $ /);
});

it ('Le nombre de votes décrémente de 1 lorsque le bouton downVote est enfoncé', () => {
  const {getByTitle} = render ();
  const downVoteButtonElement = getByTitle ('downVote');
  const voteElement = getByTitle ('nombre de votes');
  fireEvent.click (downVoteButtonElement);
  expect (voteElement) .toHaveTextContent (/ ^ - 1 $ /);
});

afterEach (nettoyage);

Après avoir écrit ces tests, Wallaby.js nous montre que les chemins de code manquants que nous avions initialement identifiés avant d'écrire des tests ont maintenant été exécutés. Nous pouvons également voir que notre couverture a augmenté. Encore une fois, vous remarquerez comment l'écriture de vos tests avec un retour instantané de Wallaby.js vous permet de voir ce qui se passe avec vos tests directement dans votre navigateur, ce qui améliore votre productivité.

Conclusion

De cet article, vous avez vu comment Wallaby.js améliore votre expérience de développeur lors du test d'applications JavaScript. Nous avons étudié certaines fonctionnalités clés de Wallaby.js, mis en place dans VS Code, puis testé une application React avec Wallaby.js.

Autres ressources

(ra, il)