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.

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
Saisissez sfdx.
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.
Sélectionnez Standard.
Saisissez test-lwc comme nom de projet.
Appuyez sur Entrée.
Sélectionnez un dossier dans lequel stocker le projet.
Cliquez sur Créer un projet et attendez que la nouvelle fenêtre Visual Studio Code s’ouvre.
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.

Installez Node.js depuis https://nodejs.org/fr/download/. Nous vous recommandons d’utiliser la version LTS (support à long terme).
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
```
Vous devriez voir comme sortie v16.13.0 ou une version ultérieure.
Lorsque vous installez Node.js, npm s’installe également automatiquement.
Dans un terminal, saisissez la commande suivante.
```
npm --version
```
Vous devriez voir comme sortie 8.1.0 ou une version ultérieure. Il est recommandé de maintenir npm à jour.

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.

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.

Vérifiez que la dernière version de la CLI est correctement installée en exécutant la commande suivante à partir de la ligne de commande.
```
sf update
```
Une sortie semblable à la suivante doit s’afficher : cli:Updating CLI....
Dans le terminal Visual Studio Code, exécutez la commande suivante dans le répertoire de niveau supérieur de votre projet Salesforce DX :
```
sf force lightning lwc test setup
```
Cette action installe npm et @salesforce/sfdx-lwc-jest dans le projet. Vous devriez voir :

Si l’erreur « Aucune version correspondante trouvée pour prettier-plugin-apex@^1.10.1 » s’affiche, mettez à jour l’élément devDependencies prettier-plugin-apex du fichier package.json vers la version ^1.10.0.

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.

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.

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.
Si vous obtenez une erreur « Invalid sourceApiVersion » (sourceApiVersion non valide), cela est dû à une mise à jour d’extension de code VS qui accompagne la dernière version de Salesforce.
error Invalid sourceApiVersion found in sfdx-project.json.Expected 51.0, found 52.0 (Erreur sourceApiVersion non valide trouvée dans sfdx-project.json. Attendue : 51.0, trouvée : 52.0)

Dans Visual Studio Code, dans le répertoire de niveau supérieur, ouvrez sfdx-project.json.

Changez la ligne de code avec « sourceApiVersion » pour y faire apparaître la version attendue du message d’erreur que vous avez reçu.
"sourceApiVersion": "51.0"

Enregistrez le fichier.

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à que 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

L’exécution de tests Jest en mode de débogage est utile si vous souhaitez parcourir vos tests et votre code d’application pour découvrir pourquoi ceux-ci ne se comportent pas comme prévu. Vous pouvez déboguer les tests Jest à l’aide des outils suivants.

Pack d’extensions Salesforce pour Visual Studio Code
Outils de développement de Chrome
Configuration avancée du débogueur Visual Studio Code

Le pack d’extensions Salesforce pour Visual Studio Code offre l’option la plus simple et la plus claire, tandis que Chrome DevTools s’adresse aux développeurs Web chevronnés. De plus, la configuration avancée du débogueur VS Code vous permet de travailler avec différents débogueurs pour différents scénarios de débogage. La configuration avancée offre l’option la plus flexible pour déboguer vos tests Jest.

Pour plus d’informations, consultez Débogage de tests Jest pour les composants Web Lightning ou 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 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 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 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 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 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.