Configuration de l’infrastructure de test Jest

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Décrire l’infrastructure de test Jest
  • Décrire le rôle de Node.js et de npm
  • Installer Node.js et npm
  • Installer le module JavaScript @salesforce/sfdx-lwc-jest dans un projet Salesforce DX

Avant de commencer

Pour compléter ce module, vous devez installer et mettre à jour Salesforce CLI, Visual Studio Code et les extensions Salesforce pour Visual Studio Code. Pour remplir ces conditions préalables, nous vous recommandons de réaliser les projets Prise en main rapide : Salesforce DX, Prise en main rapide : Visual Studio Code pour le développement Salesforce et Prise en main rapide : composants Web Lightning avant de continuer.

Nous suivons une approche de développement piloté par les tests (TDD), c’est-à-dire que nous allons écrire le test Jest avant d’écrire le composant qu’il teste. Pour cette raison, chaque test échouera dans un premier temps. Ensuite, nous mettrons à jour le composant pour que le test Jest réussisse.

Création d’un projet Salesforce DX

La première étape avant d’effectuer des tests consiste à créer un projet Salesforce DX pour stocker vos composants Web Lightning et vos tests Jest.

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez sfdx.
  3. Sélectionnez SFDX :. créer un projet. Si vous ne voyez pas cette option, suivez les prérequis de la première unité de ce module avant de continuer.
  4. Sélectionnez Standard.
  5. Saisissez test-lwc comme nom de projet.
  6. Appuyez sur Entrée.
  7. Sélectionnez un dossier dans lequel stocker le projet.
  8. Cliquez sur Créer un projet et attendez que la nouvelle fenêtre Visual Studio Code s’ouvre.
  9. Cliquez sur Afficher, puis choisissez Terminal. Cette action ouvre une fenêtre de terminal dans Visual Studio Code. Le terminal utilise par défaut le répertoire de niveau supérieur du projet. Vous aurez besoin du terminal plus tard pour exécuter des commandes dans le répertoire de travail de ce projet.

Que sont Node.js et npm ?

Node.js est un runtime JavaScript qui repose sur le moteur JavaScript V8 de Chrome et npm est un gestionnaire de packages permettant de distribuer des modules de code réutilisable. Dans l’univers de Node.js et npm, ces modules de code réutilisable sont appelés modules Node. Dans la terminologie Salesforce, un module Node (code réutilisable qui peut être facilement distribué à plusieurs projets) est semblable aux packages déverrouillés.

Node.js et npm font partie des outils couramment utilisés par les développeurs JavaScript modernes. Pour en savoir plus sur le code JavaScript moderne, consultez le parcours Découverte de l’utilisation de JavaScript.

Installation de Node.js et de npm

Jest est un module Node, vous devez donc installer Node et npm pour l’utiliser. Allons-y.

  1. Installez Node.js depuis https://nodejs.org/fr/download/. Nous vous recommandons d’utiliser la version LTS (support à long terme).
  2. Vérifiez que Node.js est installé. Dans le terminal de Visual Studio Code que nous avons ouvert précédemment, saisissez la commande suivante.
    node --version
  3. Vous devriez voir comme sortie v12.13.0 ou une version ultérieure.
  4. Lorsque vous installez Node.js, npm s’installe également automatiquement.
    Dans un terminal, saisissez la commande suivante.
    npm --version
    Vous devriez voir comme sortie 6.13.0 ou une version ultérieure.
    Remarque

    Remarque

    Vous devrez peut-être mettre à jour npm. Consultez la documentation npmjs afin d’obtenir plus d’informations sur la mise à niveau de npm pour différents systèmes d’exploitation.

Qu’est-ce que Jest ?

Jest est un outil puissant possédant des fonctionnalités enrichies pour écrire des tests JavaScript. Jest peut collecter des informations de couverture de code et prend en charge la simulation destinée à isoler les tests des dépendances complexes. Les tests Jest ne s’exécutent pas dans un navigateur ou ne se connectent pas à une organisation, c’est pourquoi leur exécution est rapide. Utilisez Jest pour écrire des tests unitaires pour tous vos composants Web Lightning. Vous devez disposer du module Node @salesforce/sfdx-lwc-jest dans votre projet Salesforce DX afin d’exécuter des tests Jest pour les composants Web Lightning.

Remarque

Remarque

Les tests Jest fonctionnent avec les composants Web Lightning dans les projets Salesforce DX, mais pas avec les composants Aura. Pour les composants Aura, consultez l’article Test des composants avec Lightning Testing Service.

Installation du module Node sfdx-lwc-jest

Le module Node @salesforce/sfdx-lwc-jest vous permet d’écrire, d’exécuter et de déboguer des tests Jest pour les composants Web Lightning. Salesforce CLI facilite l’installation de Jest et de ses dépendances dans le projet.

  1. Dans le terminal Visual Studio Code, exécutez la commande suivante dans le répertoire de niveau supérieur de votre projet Salesforce DX :
    sfdx force:lightning:lwc:test:setup
    Cette action installe npm et @salesforce/sfdx-lwc-jest dans le projet. Vous devriez voir :
    Messages de configuration dans le terminal.
    Vous remarquerez peut-être que le processus trouve des vulnérabilités. Pour les besoins de ce module, c’est une bonne chose, car ce ne sont pas les vulnérabilités que vous recherchez.
Remarque

Remarque

Pour d’autres méthodes d’installation du module Node de Jest, Salesforce met à disposition le module Node @salesforce/sfdx-lwc-jest en tant que package JavaScript sur npm à l’adresse https://www.npmjs.com/package/@salesforce/sfdx-lwc-jest et en tant que projet open source sur GitHub à l’adresse https://github.com/salesforce/sfdx-lwc-jest.
Exécutez ces commandes npm dans le répertoire de niveau supérieur de votre projet Salesforce DX :
npm install
puis :
npm install @salesforce/sfdx-lwc-jest --save-dev

Exécution de tests Jest

Excellent, vous avez configuré votre projet Salesforce DX pour pouvoir exécuter les tests Jest que vous écrirez plus tard dans ce module. Maintenant que vous avez tout configuré, les tests Jest peuvent être exécutés de différentes façons. Vous pouvez appeler le script directement, utiliser des commandes npm ou utiliser des clics dans Visual Studio Code. Vous pouvez exécuter un test ou tous les tests d’un fichier ou d’un projet. Vous pouvez même exécuter des tests automatiquement lorsque le code couvert par le test est modifié.

Découvrons les différentes façons d’exécuter des tests Jest.

La commande Node sfdx-lwc-jest

Vous pouvez exécuter le script directement à partir de son emplacement d’installation dans le projet à l’aide de la commande Node suivante.

  1. Dans le terminal de Visual Studio Code, saisissez la commande suivante dans le répertoire de niveau supérieur du projet Salesforce DX.
    node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest
    Il n’existe pas encore de tests Jest, la sortie No tests found, exiting with code 1 (Aucun test trouvé, sortie avec le code 1) devrait donc apparaître.

C’est un bon début, mais voyons comment nous pouvons améliorer le processus avec l’automatisation.

Automatisation des scripts de test avec package.json et npm

Les tests unitaires permettent notamment aux développeurs de les écrire et de les exécuter dans le cadre de leur processus de développement et d’intégration continue afin d’identifier et de corriger les bogues le plus tôt possible. Devoir continuellement vous souvenir et saisir de longues commandes comme celle ci-dessus serait contre-productif par rapport à votre objectif. C’est là où l’automatisation intervient.

npm présente une grande flexibilité en matière d’automatisation de script prête à l’emploi. L’exécution de l’installation précédente a ajouté une série d’options à la propriété scripts du fichier package.json à la racine de votre projet.

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

Si vous souhaitez exécuter tous les tests de votre projet, exécutez cette commande npm à partir du répertoire de base de votre projet.

npm run test:unit

Vous pouvez également utiliser la commande ci-dessus pour exécuter uniquement les tests d’un répertoire spécifique dans ce dernier. Cela vous permet d’isoler les éléments que vous testez.

Exécution continue de tests pendant le développement

Pour cette option, Node s’appuie sur Git pour « surveiller » le code. Pour utiliser cette option, assurez-vous d’avoir initialisé Git pour votre projet. Pour exécuter tous les tests d’un seul composant chaque fois que vous enregistrez des modifications, remplacez les répertoires par le répertoire du composant et exécutez la commande npm ci-dessous, qui utilise sfdx-lwc-jest avec le paramètre --watch. Comme mentionné précédemment, vous pouvez également l’exécuter à partir de la base du projet pour que tous les tests du projet soient exécutés à chaque modification.

npm run test:unit:watch

Jest recherche maintenant des modifications dans tous les fichiers de composant et exécute tous les tests pertinents chaque fois qu’il détecte un changement.

Exécution de tests en mode de débogage Jest

Pour exécuter les tests Jest du projet en mode de débogage, servez-vous de la commande npm ci-dessous, qui utilise sfdx-lwc-jest avec le paramètre --debug

npm run test:unit:debug

Pour plus d’informations sur la résolution des problèmes de Jest, consultez Jest : résolution de problèmes.

Exécution de tests et affichage de la couverture de code

Pour afficher la couverture de code des tests, utilisez l’option --coverage ci-dessous. 

npm run test:unit:coverage

Exécution de tests avec des clics dans Visual Studio Code

Les extensions Salesforce pour Visual Studio Code vous permettent de contrôler et de vérifier visuellement l’exécution des tests Jest. Elles vous offrent des options pour exécuter un test, plusieurs tests ou tous les tests. Elles vous donnent également la possibilité d’utiliser l’option --watch sur un fichier puisque Git est préinstallé dans Visual Studio Code. 

Cliquez sur l’icône de bécher Icône du bouton bécher de test. pour ouvrir le menu latéral Test. Si vous ne voyez pas l’icône, vous devrez peut-être créer un projet SFDX. Une section Tests LWC se trouve dans le menu latéral Test et contient tous les tests Jest du projet. Voici à quoi ressemble le menu latéral de test avec les tests de votre projet.

Tests LWC dans le menu latéral Test du projet test-lwc.

Cliquez sur le bouton de lecture Icône du bouton de lecture de test. pour exécuter un ou plusieurs tests dans un projet. Positionnez votre curseur sur le répertoire ou un test spécifique pour afficher le bouton de lecture. Lorsqu’un test est exécuté, les résultats s’affichent dans le terminal. Les résultats sont également indiqués par couleur dans le menu latéral. Le vert indique une réussite. Le bleu indique que l’exécution n’a pas eu lieu, l’orange indique que le test a été ignoré et le rouge indique l’échec du test. Le fait de cliquer sur le test dans le menu latéral ouvre le fichier et vous amène directement à ce test.

Cliquez sur l’icône d’actualisation Icône du bouton d’actualisation de test. pour effacer les résultats du test.

Des contrôles directs se trouvent également dans la vue du fichier test.

Vue du fichier test dans Visual Studio Code.

Cliquez sur le bouton de lecture Icône du bouton de lecture de test. dans la barre d’outils principale pour exécuter tous les tests du fichier. Vous pouvez également cliquer sur Exécuter le test au-dessus de chaque test dans le fichier pour exécuter un test spécifique.

Pour exécuter tous les tests du fichier chaque fois que vous enregistrez des modifications, cliquez sur l’icône représentant un œil Icône du bouton représentant un œil pour le test. dans la barre d’outils principale. Il s’agit d’une bonne option à utiliser lorsque vous travaillez sur des tests dans le fichier.

Impressionnant ! Cela fait beaucoup d’informations à absorber. 

Écrivons maintenant quelques tests.

Ressources