jest configuration debugging jest based tests
En savoir plus sur Jest Config, le débogage et la comparaison de Jest avec d'autres frameworks de test JavaScript, en particulier Jest vs Mocha & Jest vs Jasmine:
convertir char * en int c ++
Dans ce Série de plaisanterie informative , nous avons tout exploré Test des applications React, des mocks et des espions à l'aide de Jest dans notre dernier tutoriel.
Dans ce didacticiel, nous en apprendrons davantage sur les fichiers Jest Config et verrons comment vous pouvez réellement déboguer des tests Jest pour résoudre un ou plusieurs tests multiples.
Nous explorerons également certaines des options couramment utilisées dans le fichier Jest Config qui pourraient être configurées indépendamment dans un projet ou celles qui peuvent être ajoutées dans le cadre de la configuration package.json elle-même.
Nous utiliserons Visual Studio Code pour écrire nos tests Jest et utiliserons une extension ou un plugin dans VS Code pour activer la prise en charge du débogage pour les tests Jest.
De plus, nous comparerons les différents frameworks de test Javascript comme Mocha et Jasmine avec Jest et comprendrons les avantages et les inconvénients l'un de l'autre.
Ce que vous apprendrez:
Il y a Config
La configuration Jest peut être spécifiée de 3 façons
- Via une clé dans le fichier package.json.
- Via un fichier jest.config.js - Fichier de configuration écrit en module.
- Via un JSON qui pourrait être utilisé avec l'option comme indicateur –config.
Avec toutes les approches ci-dessus, vous pouvez obtenir le même résultat. Voyons la première étape - c'est-à-dire l'ajout de la configuration Jest via une clé dans le fichier package.json.
Dans le fichier package.json existant, ajoutez une nouvelle clé nommée «jest». Ce n'est rien d'autre qu'un ensemble de paires clé-valeur au format JSON. Toutes les options de configuration liées à Jest peuvent être ajoutées à cette section dans le fichier package.json.
Les options de configuration les plus fréquemment utilisées sont répertoriées ci-dessous.
# 1) Lié à la couverture
collectCoverage, coverageThreshold, coverageReporters, coverageDirectory - Ce sont les options les plus utilisées. La couverture est une métrique importante et elle garantit que le code est testé par rapport à un seuil prédéfini.
Une explication détaillée de chacun d'eux est la suivante:
# 1) CollectCoverage: Cette option est utilisée pour spécifier si nous voulons que le lanceur de test Jest collecte ou non les informations de couverture. Lorsqu'il est défini sur true, le Jest runner collecte les informations de couverture. Avec cette option, la couverture sera collectée et affichée sur la console à la fin de l'exécution du test comme indiqué ci-dessous.
# 2) Seuil de couverture: Ce paramètre nous permet de spécifier les valeurs de seuil de couverture en termes de pourcentage. Ceci est très utile lorsque l'organisation ou l'équipe souhaite adhérer à une certaine valeur minimale de couverture sans laquelle aucun code ne peut être poussé ou fusionné vers la branche principale.
Voyons comment cela peut être utilisé.
La couverture peut être spécifiée au niveau global, au niveau du fichier ou à tout autre regex. Lorsqu'il est spécifié au niveau global, tous les seuils spécifiés doivent correspondre pour tous les fichiers combinés du projet.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } }
La spécification de la couverture au niveau du fichier est également possible, en changeant «global» en nom de fichier ou regex. Les configurations de seuil peuvent varier en fonction de l'exigence.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }
# 3) Couverture Cette configuration est utilisée pour spécifier le rapporteur que vous souhaitez utiliser pour générer le rapport de couverture. Il existe de nombreux rapporteurs existants en tant que packages NPM disponibles qui pourraient être utilisés pour générer un rapport de couverture à la fin de l'exécution du test.
# 4) couvertureRépertoire: Ce paramètre permet à l'utilisateur de spécifier le répertoire dans lequel les rapports de couverture doivent être enregistrés ou conservés après leur création.
Vous trouverez ci-dessous un exemple combiné d'utilisation de tous les paramètres de configuration liés à la couverture.
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' }
Ici, nous avons utilisé 2 reporters de couverture, à savoir lcov et text. Lcov est la couverture de ligne de Linux et est présent par défaut et le reporter «text» signifie que la sortie de la couverture sera également affichée sur la console. Le rapport de couverture sera généré au chemin spécifié dans le paramètre «coverageDirectory».
# 2) Mock Related
Les simulacres sont fortement utilisés lors des tests avec Jest. Les deux options de configuration ci-dessous permettent une configuration facile et l'élimination des simulations.
- autoMocks: Lorsqu'il est défini sur true, cela simulera tous les modules importés dans le test par défaut.
- clearMocks: Lorsqu'il est défini sur true, cela effacera toutes les configurations / modules simulés après chaque test, de sorte que chaque test commence avec un nouvel état. Cela peut également être réalisé en utilisant la méthode testCleanup ou «après», mais l'avoir dans la configuration le rend encore plus facile.
# 3) Tests liés
# 1) testTimeout: Cette configuration est utilisée pour fournir un paramètre de délai d'attente pour les tests en millisecondes. Tout test dépassant ce seuil configuré sera marqué comme échoué en raison d'une exception de délai d'expiration.
'jest' { 'testTimeout': 100 }
# 2) Mondial: Cette configuration est utilisée pour définir les variables globales qui devraient être disponibles avec chaque test.
'jest' { 'globals': { 'globalVar': 'test global variable!' } }
Essayons d'utiliser une variable globale dans le test et voyons si cela fonctionne comme prévu.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) })
Après avoir exécuté ce test, la valeur de globalVar doit être enregistrée.
Vérifier Ici pour la liste exhaustive de toutes les options de configuration.
Tutoriel vidéo sur la configuration du SI
Débogage à l'aide de Jest
Dans cette section, nous allons essayer de comprendre comment nous pouvons déboguer des tests écrits sur la base de Jest.
Nous appliquerons et comprendrons 2 manières différentes de déboguer les tests Jest.
- Débogueur natif de Node, puis utilisation de Chrome Inspector pour déboguer les tests.
- Utilisation de la configuration de débogage de Visual Studio Code pour déboguer les tests dans l'éditeur Visual Studio Code lui-même. C'est le moyen le plus couramment utilisé pour déboguer car Visual Studio Code est l'éditeur par défaut de choix pour la plupart des développements Javascript de nos jours.
Chacune de ces approches est expliquée ci-dessous en détail.
# 1) Utilisation du débogueur natif de Node
Pour utiliser le débogueur natif de Node JS, nous devons insérer le mot-clé «debugger» dans le test, là où nous voulons placer le point d'arrêt.
Une fois que l'exécuteur de test rencontre le débogueur , cela interrompt l'exécution et si nous attachons des outils de débogage Chrome, nous pouvons déboguer le code de test (ainsi que la fonction testée) à l'aide des outils Chrome.
Le navigateur Chrome est ici une condition préalable pour utiliser le débogueur natif de Node.
Veuillez suivre les étapes ci-dessous.
#1) Ajoutez un mot-clé de débogage dans le test, c'est-à-dire à l'endroit où vous souhaitez que le test atteigne le point d'arrêt, insérez la commande «débogueur»
#deux) Exécutez le test à l'aide de l'indicateur –inspect-brk.
Utilisez la commande ci-dessous pour exécuter le test en mode point d'arrêt.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand
# 3) Associez le débogueur de Node dans Chrome. À présent, dans le navigateur Chrome, accédez à chrome: // inspectez et connectez-vous à l'auditeur cible créé à l'étape ci-dessus.
# 4) Continuez l'exécution et vous verrez que le point d'arrêt atteint dans l'inspecteur du débogueur chrome et vous pouvez déboguer la pile d'appels et l'état de l'objet dans le débogueur chrome lui-même.
Cette approche de débogage des tests Jest est correcte mais pas très conviviale car vous devez continuer à passer de l'éditeur de code à Chrome et vice versa, ce qui provoque beaucoup de frictions. Dans la section à venir, nous verrons les moyens de configurer le débogueur dans l'éditeur Visual Studio Code lui-même.
# 2) Utilisation de la configuration de débogage de VS Code
#1) Sélectionnez la section Déboguer / Exécuter de Visual Studio Code dans le panneau de gauche.
meilleur logiciel gratuit d'accélération de pc
#deux) Maintenant, nous allons mettre à jour la configuration de débogage pour les tests de plaisanterie. Pour ce faire, ajoutez une nouvelle configuration en sélectionnant l'option de menu.
# 3) Une fois que l'option d'ajout de configuration est sélectionnée, il ouvrira le fichier `launch.json` avec le contenu par défaut dans le volet de l'éditeur. Supprimez le contenu par défaut et copiez le contenu ci-dessous pour créer une configuration de débogage pour les tests Jest.
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) }
# 4) Enregistrez la configuration de contenu nouvellement ajoutée qui serait utilisée pour déboguer les tests Jest. Si vous lisez attentivement la configuration, cela ressemble à ce que nous avons fait lorsque nous avons essayé de nous connecter au débogueur Node dans les outils de développement Chrome via la commande.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBand
L'avantage d'avoir config ici est que les tests seront exécutés / débogués dans le cadre de l'éditeur lui-même (dans ce cas, c'est VSCode) et nous n'avons pas besoin de nous connecter à une application externe.
# 5) Une fois la configuration de débogage créée, vous pouvez désormais ajouter des points d'arrêt aux tests et exécuter à l'aide de cette configuration RUN. Cela garantira que le test s'arrête aux points d'arrêt et vous pouvez déboguer les valeurs, l'état de l'objet au point d'arrêt dans le fichier de test réel.
Des points d'arrêt peuvent être ajoutés en cliquant près des numéros de ligne dans les fichiers de code.
# 6) Une fois le point d'arrêt ajouté, nous pouvons sélectionner la configuration Run que nous avons ajoutée à l'étape 3 afin d'exécuter / déboguer le test.
# 7) En sélectionnant / cliquant sur le bouton Exécuter, vous devriez être en mesure de voir que l'exécution atteint le point d'arrêt qui a été placé et vous pouvez obtenir plus de détails comme les valeurs d'environnement / de variable, la trace de la pile, etc. au point d'arrêt.
Les boutons de contrôle de flux de point d'arrêt / code peuvent être utilisés pour passer au point d'arrêt suivant ou pour se déplacer à l'intérieur de la fonction pour plus de détails.
Tutoriel vidéo He ISDébogage
Il y a Mocha Vs Jasmine
Dans la section ci-dessous, nous comparerons Jest vs Mocha et Jest vs Jasmine sur différents paramètres et comparaisons de fonctionnalités telles que les tests d'instantané, la facilité de configuration et les capacités de différents frameworks.
Paramètre | Est | Moka | Jasmin |
---|---|---|---|
Types de tests pris en charge | Principalement utilisé pour les tests unitaires. | Test unitaire | Tests unitaires et tests E2E. |
Test de cliché | Entièrement pris en charge - Spécifiquement utilisé pour les composants React, Jest prend en charge la prise d'instantanés d'un composant et son utilisation pour comparer la sortie de test à la structure de composant enregistrée. Les instantanés sont un excellent moyen de garantir que les interfaces utilisateur ne changent pas de manière inattendue. | Pas de support | Pas de support |
Assertions et matchers | Utilisez la bibliothèque expect.js pour les correspondants. | Prise en charge du module d'assertions intégré de Node et peut également inclure d'autres bibliothèques d'assertions. | Dans les assertions construites |
Railleur | Prise en charge entièrement intégrée des mocks et des stubs dans Jest. | Pas de support intégré pour la moquerie ou le stubbing. Peut être utilisé avec d'autres bibliothèques comme Sinon pour prendre en charge Mocking. | Prise en charge limitée intégrée à l'aide de spyOn. Peut s'intégrer à d'autres bibliothèques. |
Vitesse d'exécution | 4x Les jest tests sont isolés dans leur propre bac à sable. Ainsi, les tests Jest sont essentiellement exécutés en parallèle, ce qui améliore considérablement les temps d'exécution. | X Ne prend pas en charge l'exécution parallèle de tests. | X Ne prend pas en charge l'exécution parallèle de tests. |
Configuration et installation | Très facile - aucune configuration requise. | ||
Mode d'exécution du test | Sans tête | Sans tête | Sans tête |
Résultat du test et contexte | Génère un contexte de post-exécution riche - Jest fournit un contexte de test détaillé pour approfondir ce qui a causé un échec, garantissant ainsi un débogage facile. | La sortie de test n'est pas très lisible et rend le débogage un peu difficile. | |
Débogage | La prise en charge des débogueurs de nœuds natifs peut également être utilisée pour déboguer dans des éditeurs tels que Visual Studio Code via une configuration de lancement distincte. | Prend en charge le débogueur de nœud natif. | Peut utiliser le coureur de test karma pour lancer des tests dans Chrome et déboguer. |
Couverture de code | Jest a un support intégré pour la couverture de code. La configuration de la couverture peut être spécifiée dans la configuration Jest et les rapports peuvent être générés à chaque exécution de test. | Pas de support intégré. Prend en charge les bibliothèques externes pour générer des rapports de couverture. | Identique au moka |
Style de test | BDD Les trois frameworks prennent en charge les tests à écrire sous la forme d'un ensemble de spécifications ou de spécifications qui les rendent plus lisibles. | BDD | BDD |
Conclusion
Dans ce didacticiel, nous avons découvert les différentes façons dont vous pouvez déboguer vos tests Jest dans Visual Studio Code ou dans Chrome Inspector à l'aide du débogueur natif de Node.
Nous avons également exploré les options de configuration couramment utilisées dans le fichier de configuration Jest. La configuration Jest permet de réaliser beaucoup de choses comme la couverture de code, les rapports Html, la configuration de comportements simulés, la configuration de variables globales, etc.
Tutoriel PREV | PREMIER Tutoriel
lecture recommandée
- Tutoriel Jest - Tests unitaires JavaScript à l'aide de Jest Framework
- Comment tester les applications React à l'aide de Jest Framework
- Tutoriel Jasmine Framework incluant Jasmine Jquery avec des exemples
- Constructions distribuées: configuration de l'esclave maître Jenkins
- Techniques de débogage dans Selenium: points d'arrêt, mode de débogage et plus
- Tutoriel de test de configuration avec des exemples
- Comment configurer le cadre de test Node.js: Tutoriel Node.js
- 25 meilleurs cadres et outils de test Java pour les tests d'automatisation (partie 3)