Menu

Tutoriel Jest - Tests unitaires JavaScript à l'aide de Jest Framework

  • Principal
  • Autre
  • Tutoriel Jest - Tests unitaires JavaScript à l'aide de Jest Framework

jest tutorial javascript unit testing using jest framework

Essayez Notre Instrument Pour Éliminer Les Problèmes

Dans ce didacticiel Jest, nous découvrirons diverses fonctionnalités de Jest, Jest Matchers et comment utiliser le framework Jest pour les tests unitaires JavaScript:

Jest est un framework de test Javascript construit par Facebook.

Il est principalement conçu pour les applications basées sur React (qui est également construit par Facebook), mais pourrait être utilisé pour écrire des scénarios d'automatisation pour toutes les bases de code JavaScript.

Dans ce didacticiel de test Jest, nous découvrirons diverses fonctionnalités de Jest, ses correspondants et verrons comment nous pouvons utiliser Jest avec un exemple de bout en bout. Nous explorerons également la couverture du code à l'aide de Jest.

Il y a un tutoriel

Liste des didacticiels de cette série JEST

Tutoriel n ° 1: Tutoriel Jest - Tests unitaires JavaScript avec Jest Framework
Tutoriel n ° 2: Comment tester les applications React à l'aide de Jest Framework
Tutoriel n ° 3: Configuration Jest et débogage des tests basés sur Jest

Ce que vous apprendrez:

Premiers pas avec Jest Testing

Certains des avantages / fonctionnalités de Jest sont donnés ci-dessous:

  1. Aucune configuration requise.
  2. Vite: Les tests Jest s'exécutent en parallèle - cela réduit considérablement le temps d'exécution des tests.
  3. Couverture de code intégrée: Jest prend en charge la couverture de code prête à l'emploi - il s'agit d'une métrique très utile pour tous les pipelines de livraison basés sur CI et l'efficacité globale des tests d'un projet.
  4. Tests isolés et sandbox: Chaque test Jest s'exécute dans son propre bac à sable, ce qui garantit qu'aucun test ne peut interférer ou avoir un impact l'un sur l'autre.
  5. Support moqueur puissant: Les tests Jest prennent en charge tous les types de moqueries - qu'il s'agisse de moqueries fonctionnelles, de moqueries de minuterie ou d'appels d'API individuels.
  6. Prise en charge des tests d'instantané: Les tests d'instantanés sont pertinents du point de vue de React. Jest prend en charge la capture d'un instantané du composant de réaction testé - cela peut valider avec la sortie réelle du composant. Cela aide grandement à valider le comportement du composant.

Jest Framework pour les tests unitaires JavaScript

Dans cette section, nous verrons un exemple de bout en bout pour écrire des tests en utilisant le framework JEST pour une simple fonction Javascript. Tout d'abord, voyons comment installer le framework JEST dans notre projet

Installation du SI

Jest est simplement un package de nœuds et peut être installé à l'aide de n'importe quel gestionnaire de packages basé sur des nœuds. Exemple, npm ou fil.

Voyons quelques exemples de commandes pouvant être utilisées pour installer le package Jest.

yarn add --dev jest npm install --save-dev jest

Pour installer le module Jest globalement, vous pouvez simplement utiliser l’indicateur ‘-g’ avec la commande npm. Cela vous permettra d'utiliser directement les commandes Jest sans configurer le fichier de package pour les tests npm.

convertisseur studio gratuit youtube en mp3
npm install -g jest

Utilisation de Jest dans un projet basé sur un nœud

Pour utiliser Jest dans un projet basé sur des nœuds, utilisez simplement les commandes de la section ci-dessus pour installer le package de nœuds pour Jest.

Suivez les étapes ci-dessous, afin de créer un projet de nœud depuis le début, puis installez Jest dedans.

#1) Créez un dossier / répertoire avec un nom comme nom de votre projet, par exemple , myFirstNodeProject

#deux) À l'aide du terminal ou de la ligne de commande, accédez au projet créé à l'étape ci-dessus et exécutez le script npm init à l'aide de la commande ci-dessous.

npm init

# 3) Une fois la commande ci-dessus exécutée, elle demandera différentes questions / paramètres.

Par exemple , le nom du projet, la version, etc. Maintenez simplement la touche Entrée (et acceptez les valeurs par défaut). Une fois terminé, vous verrez un fichier package.json créé dans votre projet. Il s'agit d'un fichier de configuration obligatoire pour tout projet basé sur des nœuds

# 4) Exécutez maintenant la commande pour installer le package Jest dans le projet nouvellement créé à l'aide de la commande ci-dessous.

npm install --save-dev jest

Cela installera le module Jest (ainsi que ses dépendances).

# 5) Maintenant, nous avons un projet de nœud prêt avec des liaisons Jest. Configurons le script de test npm pour exécuter les tests Jest, c'est-à-dire que lorsque la commande «npm test» est exécutée, le script doit exécuter tous les tests basés sur le framework Jest.

Pour ce faire, mettez à jour le fichier package.json et ajoutez une section de script comme indiqué ci-dessous.

'scripts': { 'test': 'jest' }

Le fichier final package.json ressemblera à celui ci-dessous.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Ecrire des tests pour une fonction Javascript

Dans cette section, nous allons créer un code de fonction Javascript simple pour l'addition, la soustraction et la multiplication de 2 nombres et écrire les tests correspondants basés sur Jest.

Voyons d'abord à quoi ressemble le code de notre application (ou fonction) testée.

#1) Dans le projet de nœud créé dans la section ci-dessus, créez un fichier js nommé calculator.js avec le contenu comme indiqué ci-dessous

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#deux) Maintenant, créez un fichier de test dans le même dossier pour ces tests, nommé calculator.test.js - c'est la convention attendue par le framework Jest pour rechercher tous les fichiers contenant des tests basés sur Jest. Nous importerons également la fonction sous test, afin d'exécuter le code dans le test.

Voici à quoi ressemblerait le fichier avec une simple déclaration import / require.

const mathOperations = require('./calculator');

# 3) Maintenant, écrivons des tests pour différentes méthodes dans le fichier principal, c'est-à-dire sum, diff et product.

Les tests Jest suivent les tests de style BDD, chaque suite de tests ayant un bloc de description principal et peut avoir plusieurs blocs de test. Notez également que les tests peuvent également avoir des blocs de description imbriqués.

Écrivons un test pour ajouter 2 nombres et valider les résultats attendus. Nous fournirons les nombres comme 1 et 2 et attendons la sortie comme 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Veuillez vous référer aux points ci-dessous par rapport au test ci-dessus:

à) Le bloc describe est une description externe de la suite de tests, c'est-à-dire qu'il représente un conteneur générique pour tous les tests que nous allons écrire pour la calculatrice dans ce fichier.

b) Ensuite, nous avons un bloc de test individuel - cela représente un seul test. La chaîne entre guillemets représente le nom du test.

c) Reportez-vous au code dans le bloc expect - «expect» n'est rien d'autre qu'une assertion. L'instruction appelle la méthode sum dans la fonction testée avec les entrées 1 et 2 et s'attend à ce que la sortie soit 3.

Nous pouvons également réécrire cela de manière plus simple pour mieux le comprendre.

Veuillez voir ci-dessous, maintenant nous avons séparé l'appel de fonction et l'assertion en 2 instructions séparées pour le rendre plus succinct.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

ré) Pour exécuter ce test, exécutez simplement la commande ' test au-dessus du niveau de la mer »Dans le terminal ou l'invite de commande à l'emplacement du projet.

Vous verrez la sortie comme indiqué ci-dessous.

Exécutez la commande «npm test» dans le terminal - Sortie

# 4) Essayons quelques tests supplémentaires.

à) Tout d'abord, écrivez un test qui échoue et voyez quel résultat nous obtenons. Modifions simplement le résultat en une valeur incorrecte dans le même test que nous avons écrit dans la dernière section. Voyez à quoi ressemble le test.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Ici, nous nous attendons à ce qu'une somme de 1 et 2 renvoie 10, ce qui est incorrect.

Essayons de l'exécuter et voyons ce que nous obtenons.

sortie détaillée en cas d

Vous pouvez voir la sortie détaillée lorsqu'un test échoue, c'est-à-dire ce qui a été réellement retourné et ce qui était attendu et quelle ligne a causé l'erreur dans la fonction testée, etc.

b) Écrivons plus de tests pour les autres fonctions, à savoir la différence et le produit.

Le fichier de test avec tous les tests ressemblera à celui ci-dessous.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Lorsque les tests ci-dessus sont exécutés, la sortie donnée ci-dessous est générée.

Teste la sortie des fonctions - différence et produit

Tutoriel vidéo: Qu'est-ce que Jest

Il y a des Matchers

Les assertions de plaisanterie utilisent des matchers pour affirmer une condition. Jest utilise des matchers de l'API expect. Le document API attendu peut être référencé ici.

Passons en revue quelques-uns des apparieurs les plus couramment utilisés avec les tests Jest.

# 1) Égalité

Ce sont les matchers les plus couramment utilisés. Ils sont utilisés pour vérifier l'égalité ou l'inégalité et sont principalement utilisés pour les opérations arithmétiques.

Voyons quelques exemples ci-dessous:

Ici, nous avons écrit 2 matchers utilisant toBe et not.toBe qui sont analogues à égaux et non égaux.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Vérité

Ici, nous allons voir, des correspondances pour les valeurs nulles, fausses et véridiques, c'est-à-dire fausses et vraies. Il est important de noter que tout ce qui n’est pas logiquement vrai est faux.

Par exemple, nombre 0, null, chaîne vide, NaN sont tous des exemples de faux avec Javascript.

meilleur téléchargeur de musique mp3 gratuit pour android
test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Matchers de numéros

Ces apparieurs pourraient être utilisés pour des opérations arithmétiques générales.

Par exemple, GreaterThan, lessThan, greaterThanOrEqual, etc.

Consultez les exemples ci-dessous pour plus de détails

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Matchers de chaîne

Souvent, nous avons besoin de chaînes pour correspondre à une expression régulière en tant qu'assertion dans un test unitaire. Jest fournit des correspondances pour les chaînes à mettre en correspondance avec une expression régulière.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Tutoriel vidéo: il y a des matchers

Jest Hooks - Configuration et démontage

Tout comme tous les autres frameworks de tests unitaires basés sur xUnit, le framework Jest fournit également des hooks pour les méthodes de configuration et de nettoyage. Ces méthodes hook sont exécutées avant et après chaque test dans la suite de tests ou avant et après l'exécution de testSuite.

Au total, 4 crochets sont disponibles.

  • avant chaque et après chaque: Ces hooks sont exécutés avant et après chaque test de la suite de tests.
  • beforeAll et afterAll: Ces hooks sont exécutés une seule fois pour chaque suite de tests. c'est-à-dire si une suite de tests a 10 tests, alors ces hooks ne seront exécutés qu'une seule fois pour chaque exécution de test.

Voyons un exemple: Nous ajouterons ces crochets au même exemple de test d'ajout de 2 nombres.

Nous allons définir les entrées dans beforeEach hook pour illustration. Le fichier de test ressemblerait à des crochets de test comme indiqué ci-dessous.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Conseils & Astuces

#1) Les rapports de ligne de commande sont bons mais pas très lisibles. Il existe des bibliothèques / modules disponibles pour générer des rapports de test HTML pour les tests Jest. Il peut être réalisé comme indiqué ci-dessous.

  • Ajoutez le package de nœuds pour jest-html-reporter à l'aide de la commande ci-dessous.
npm install --save-dev jest-html-reporter
  • Ajoutez maintenant la configuration Jest pour le rapporteur dans le fichier package.json du projet de nœud.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Une fois configuré maintenant, exécutez les tests en utilisant le ' test au-dessus du niveau de la mer »Commande.
  • Si la configuration réussit, vous devriez pouvoir voir un rapport basé sur Html créé dans le répertoire du projet.

Rapport de test

# 2) Création d'un rapport de couverture de code: La couverture du code est l'une des mesures les plus importantes du point de vue des tests unitaires. Il mesure essentiellement le pourcentage de déclarations / succursales couvertes pour l'application testée.

Jest fournit un support prêt à l'emploi pour la couverture du code. Afin d'obtenir le rapport de couverture Jest, Il y a configuration doit être ajouté dans le package.json déposer.

Ajoutez la configuration comme indiqué ci-dessous:

'jest': { 'collectCoverage':true }

Une fois cette configuration terminée, essayez d'exécuter les tests à l'aide de la commande 'Test au-dessus du niveau de la mer' , et tu peux voir les détails de la couverture du code juste en dessous des résultats de l'exécution du test, comme indiqué ci-dessous.

détails de couverture de code

Tutoriel vidéo: couverture Jest et génération de rapports HTML

Conclusion

Dans ce didacticiel Jest, nous avons abordé les bases du framework Jest. Nous avons appris comment installer le framework Jest et vu comment il peut être utilisé pour tester de simples fichiers Javascript.

Nous avons également exploré les différents types de matchers pris en charge par Jest et couvert les reporters Html et les rapports de couverture de code.

Tutoriel SUIVANT

lecture recommandée

^