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 sortiev16.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 sortie8.1.0
ou une version ultérieure. Il est recommandé de maintenir npm à jour.
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.
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 :
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.
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 sortieNo 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à 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.
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.
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.
Ressources
- Guides pour développeurs : Tests de composants Web Lightning
- Blog Salesforce : Test unitaire des composants Web Lightning avec Jest
- Extensions Salesforce pour VS Code : Tests de composants Web Lightning
- Site externe : Node.js : Téléchargements
- Site externe : npm : @salesforce/sfdx-lwc-jest
- Site externe : npm : utilisation d’un package.json
- Site externe : npm : package.json
- Site externe : Jest : Getting Started
- Site externe : Jest : Configuration
- Site externe : Jest : Résolution de problèmes
- Site externe : Wikipedia : le développement piloté par les tests