Catégories
Astuces et Design

Supercharge Testing React Applications avec Wallaby.js – Smashing Magazine

A propos de l'auteur

Kelvin est un fabricant 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…
Plus à propos
Kelvin

Avez-vous déjà dû passer de votre éditeur à votre terminal pour voir les résultats de vos tests? Cet article vous présentera Wallaby.js – un outil de productivité JavaScript qui suralimente votre IDE en vous permettant d'obtenir des commentaires en temps réel sur vos tests JavaScript dans votre éditeur de code avant même d'enregistrer le fichier. Vous apprendrez également à utiliser Wallaby.js pour tester les applications React.

Remarque: Pour pouvoir suivre, vous devez être familiarisé avec les tests JavaScript et avoir une connaissance pratique de la création d'applications React.

Une chose que vous découvrirez très rapidement lorsque vous commencerez à écrire des tests pour une application est que vous souhaitez 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 exécuteur de tests intelligent pour JavaScript qui exécute en permanence vos tests. 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.

Une capture d'écran de Wallaby.js, un lanceur de test intelligent pour JavaScript qui exécute vos tests en continu
(Grand aperçu)

Pourquoi Wallaby.js?

Comme indiqué précédemment, Wallaby.js vise à améliorer votre productivité dans votre développement JavaScript quotidien. 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 profiter des avantages de Wallaby.js en 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.

Installez l'extension de code VS Wallaby.js

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

Une fois l'extension installée, le moteur d'exécution principal 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.

Ajouter la clé de licence au code VS

Après avoir obtenu une clé de licence, rendez-vous sur VS Code et dans la palette de commandes, recherchez "Wallaby.js: Gérer la clé de licence", 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 réagissez

Maintenant que Wallaby.js est configuré dans notre éditeur VS Code, testons une application React avec Wallaby.js.

Pour notre application React, nous ajouterons une simple fonction de vote positif / négatif et nous écrirons quelques tests pour notre nouvelle fonctionnalité pour voir comment Wallaby.js se 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 suivre ci-dessous.

Nous allons créer notre application React à l'aide de l'outil CLI create-react-app.

npx create-react-app wallaby-js-demo

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

Ouvert 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 + Décalage + R R si vous êtes sur une machine Windows ou Linux, ou Cmd + Décalage + R R si vous êtes sur un Mac).

Une capture d'écran de la création de l'application React à l'aide de l'outil CLI create-react-app
(Grand aperçu)

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

Une capture d'écran du fichier App.js montrant les indicateurs de couverture de test lors du démarrage de Wallaby.js
(Grand aperçu)

Wallaby.js fournit 5 différents indicateurs colorés dans la marge gauche de votre éditeur de code:

  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 sur une ligne donnée a été exécutée mais que 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 en échec.
  5. Rouge: signifie que la ligne de code est la source d'une erreur ou d'une attente raté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 à 100% pour src/App.js et un seul test de réussite sans échec. Comment Wallaby.js le sait-il? Lorsque nous avons lancé Wallaby.js, il a détecté 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 nous donne les retours en utilisant ses indicateurs de couleur et en nous donnant é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

Une capture d'écran du code dans le fichier App.test.js
(Grand aperçu)

Actuellement, tous les tests passent pour le moment, nous obtenons donc tous les indicateurs verts. Voyons comment Wallaby.js gère les tests échoués. Dans src/App.test.js faisons échouer le test en modifiant 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 ouvert:

Une capture d'écran du fichier App.test.js ouvert dans un éditeur montrant des tests ayant échoué
(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 effectué une modification.

Vous remarquerez également la ligne dans votre éditeur dans src/App.test.js qui génère l'erreur du test. Cela se fait grâce à la journalisation avancée de Wallaby.js. En utilisant 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: Show Value.

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»)

Une capture d'écran du fichier App.test.js ouverte dans un éditeur avec l'onglet indicateur de tests Wallaby.js ouvert
(Grand aperçu)

Dans la fenêtre de sortie de Wallaby.js, juste à côté du test qui a échoué, vous devriez voir un lien «Debug Test». Pressage 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.

Une capture d'écran du fichier App.test.js ouvert dans un éditeur montrant la valeur d'exécution sélectionnée
(Grand aperçu)

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. presse 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 exécuté par votre test dans une seule vue logique.

Une capture d'écran de ce qui peut être vu dans l'onglet Test Story
(Grand aperçu)

Une autre chose que nous allons explorer avant de corriger notre test échoué 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:

Une capture d'écran du projet d'application de démonstration Wallaby.js prévisualisé dans le navigateur
(Grand aperçu)

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

Une capture d'écran d'un onglet du navigateur montrant l'aperçu de la démonstration de l'application Wallaby.js et où se trouve l'onglet Fichiers
(Grand aperçu)

Revenons à la Des tests , cliquez sur le test et vous devriez voir la fonctionnalité de rapport d'erreur Wallaby.js à droite:

Une capture d'écran montrant comment l'application signale les erreurs
(Grand aperçu)

Maintenant, nous avons couvert tout cela, revenons à l'éditeur et corrigeons l'échec du test pour rendre Wallaby.js heureux en rétablissant la ligne que nous avons modifiée précédemment:

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.

Une capture d'écran du fichier App.test.js ouvert dans un éditeur montrant tous les tests réussis dans l'onglet Sortie
(Grand aperçu)

Mettre en œuvre 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 négatif, 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 ressembler à ça.

// 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 (
    
logo

{voter}

); } exporter l'application par défaut;

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

.votes {
  display: flex;
  justify-content: space-between;
}
p.vote {
  font-size: 4rem;
}
button {
  padding: 2rem 2rem;
  font-size: 2rem;
  border: 1px solid #fff;
  margin-left: 1rem;
  border-radius: 100%;
  transition: all 300ms;
  cursor: pointer;
}

button:focus,
button:hover {
  outline: none;
  filter: brightness(40%);
}

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

Une capture d'écran de l'échec du test initial dans le fichier App.test.js
(Grand aperçu)

Ces indices visuels de Wallaby.js sont pratiques pour le développement piloté par les tests (TDD) car nous obtenons un retour instantané 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 tests React 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 } from '@testing-library/react';

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

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

Immédiatement, vous verrez l'indicateur passer au vert dans les deux src/App.test.js ligne où nous testons le rendu de l'application et également où nous appelons render dans notre src/App.js.

Une capture d'écran du fichier App.test.js ouvert dans un éditeur affichant des indicateurs verts
(Grand aperçu)

Ensuite, nous testerons que la valeur initiale du vote l'état est zéro (0).

it('Vote count starts at 0', () => {
  const { getByTitle } = render();
  const voteElement = getByTitle('vote count');
  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 pressed', () => {
  const { getByTitle } = render();
  const upVoteButtonElement = getByTitle('upVote');
  const voteElement = getByTitle('vote count');
  fireEvent.click(upVoteButtonElement);
  expect(voteElement).toHaveTextContent(/^1$/);
});

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

it('Vote decrements by 1 when downVote button is pressed', () => {
  const { getByTitle } = render();
  const downVoteButtonElement = getByTitle('downVote');
  const voteElement = getByTitle('vote count');
  fireEvent.click(downVoteButtonElement);
  expect(voteElement).toHaveTextContent(/^-1$/);
});

Oups, ce test échoue. Voyons pourquoi. Au-dessus du test, cliquez sur le View story lien de lentille de code ou Debug Test lien dans la fenêtre de sortie de Wallaby.js et utilisez le débogueur pour accéder au downVote une fonction. Nous avons un bug… nous aurions dû décrémenter le nombre de votes de 1 mais à la place, nous décrémentons de 2. Corrigeons notre bug 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 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import App from './App';

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

it('Vote count starts at 0', () => {
  const { getByTitle } = render();
  const voteElement = getByTitle('vote count');
  expect(voteElement).toHaveTextContent(/^0$/);
});

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

it('Vote count decrements by 1 when downVote button is pressed', () => {
  const { getByTitle } = render();
  const downVoteButtonElement = getByTitle('downVote');
  const voteElement = getByTitle('vote count');
  fireEvent.click(downVoteButtonElement);
  expect(voteElement).toHaveTextContent(/^-1$/);
});

afterEach(cleanup);

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 les commentaires instantanés de Wallaby.js vous permet de voir ce qui se passe avec vos tests directement dans votre navigateur, ce qui améliore votre productivité.

Résultat final de la démo de Wallaby.js ouverte dans un onglet du navigateur
(Grand aperçu)

Conclusion

Dans 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, l'avons configuré dans VS Code, puis testé une application React avec Wallaby.js.

Autres ressources

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *