TDD & Test Unit avec Jest

TDD & Test Unit avec Jest

TD, Test Unit, vous avez certainement déjà entendu ou lu ces terms. Ils sont presque incontournables. Je vous explique ici ce que c’est que le TDD et pourquoi faire des tests unitaires. Nous verrons aussi quels outils de testing utiliser pour effectuer les tests et le reporting de ces derniers.

Alors pour commencer je vais vite expliquer pourquoi en plus du développement, il faut encore effectuer (se tapper) des tests… mais des tests de quoi d’abord??
Et bien de votre code!!

Test Unit, pourquoi tester son code?

Pour comprendre l’importance des tests en programmation, je vous explique pourquoi il est primordial de tester votre code, de vérifier que son fonctionnement est correct.

Les tests unitaires permettent de détecter les modifications qui sont susceptibles de faire bugger votre application. Ils aident à maintenir et à changer le code. tout en réduisant les défauts des nouvelles fonctionnalités développées ou bugs lors du changement des fonctionnalités existantes.

C’est le garde fou qui vous prévient quand quelque chose ne fonctionne plus correctement. Voici en quoi ils sont indispensables.

C’est quoi le TDD

C’est très simple. Le TDD veut dire « Test Driving Developement », traduction: « Développement dirigé par les Test ». Cela veut dire qu’au lieu de se lancer tête baissée dans la conception de son code, on va en premier créer le test du code que l’on veut écrire….

Aller petite démo.
Je vais créer une super librairie de mathématique pour l’occasion 😉

Test Unitaire avec Javascript

Donc pour commencer, je dois décrire ce que je vais coder, et effectuer les tests de ce que je décris avant de développer le code. Le code est terminé d’être développé quand la fonctionnalité désirée est terminé et que tous les tests passent sans erreur.

Avec Javascript nous avons plusieurs outils qui existe qui permettent de tester le code. Je vais vous en presenter un très facile d’utilisation que vous retrouverez régulièrement dans les articles, tutoriel, workshops ou cours que je donne.

Jest, l’outil de Test Unit pour Javascript

Jest est un framework de testing extrêmement facile à utiliser. Il n’y a presque pas de configuration à faire pour utiliser ce framework. On install le package en Dev, écrit un test et lance la commande NPM pour run les test en mode « watch ». C’est tout. Après libre à vous de reprendre la logic présenté et d’utiliser un autre framework comme Mocha par exemple.

Comment écrie les Tests

Bah en français… vous décrivez ce que doit faire votre code… après on écrit le Test dans un fichier Javascript que l’on nomme <MON_FICHIER>.spec.js
Ce qui est important c’est le .spec.js qui permet à Jest de trouver le fichier de test.

Aller je vous montre comment écrire les tests:

Créer une lib de Math nommé MyMath
Liste des test de MyMath:

1. Méthode pour additionner
1.1: Est-ce que MyMath à une méthode nommée sum
1.2: Est-ce que MyMath additionne 1 + 1 et que c'est égale à 2
1.3: Est-ce que MyMath additionne "1" + 1 et que c'est égale à 2
1.4: Est-ce que MyMath additionne -1 + 1 et que c'est égale à 0
1.5: Est-ce que MyMath additionne null + null et que c'est égale à 0

2. Méthode pour soustraire
2.1: Est-ce que MyMath à une méthode nommée sub
2.2: Est-ce que MyMath soustrait 3 - 1 et que c'est égale à 2
etc...

Facile cette étape. Maintenant on va codé la liste de test avec Jest et lancer les tests pour voir ce qui ce passe…

Pour écrire les Test avec Jest, vous devez ajouter Jest à votre projet Javascript avec NPM et créer le fichier de config.

$ npm install --save-dev jest @types/jest
$ npx jest --init

Quand vous aurez répondu aux questions vous pouvez commencer et créer votre 1er test unit! Aller on regarde la syntaxe du framework Jest!

Pour décrire un test, on utilise describe() qui permet de définir des groupes de tests avec l’explication de ce que l’on test.

describe('Liste des test de MyMath:', () => {
  describe('Méthode pour additionner', () => {

  });

  describe('Méthode pour soustraire', () => {

  });
});

Facile jusque-là. Maintenant il va falloir décrire les tests à proprement dit. Pour cela on utilise test() qui nous permet de le faire facilement. Je profite pour vous dire que vous pouvez aussi utiliser it() qui fait la même chose.

describe('Liste des test de MyMath:', () => {
  describe('Méthode pour additionner', () => {
    it('Est-ce que MyMath à une méthode nommée sum', () => {
      // test logic here
    });
  });
  describe('Méthode pour soustraire', () => {
    it('Est-ce que MyMath à une méthode nommée sub', () => {
      // test logic here
    });
  });
});

Voilà on commence à avoir un fichier plus garni. Maintenant voyons comment créer la logic du test en elle-même. Il y a une liste de fonctions tous faites qui permettent de checker le fonctionnement du code.
Vous retrouvez la liste complète des méthodes liée à expect().

Une demo vaut mieux que tout:

import { MyMath } from './mymath.js';

describe('Liste des test de MyMath:', () => {
  describe('Méthode pour additionner', () => {
    it('Est-ce que MyMath à une méthode nommée sum', () => {
      expect(MyMath.sum).toBeDefined()
    });
    
    it('Est-ce que MyMath additionne 1 + 1 et que c est égale à 2', () => {
      expect(MyMath.sum(1, 1)).toBe(2)
    });
  });
  describe('Méthode pour soustraire', () => {
    it('Est-ce que MyMath à une méthode nommée sub', () => {
      // test logic here
    });
  });
});

Maintenant que nous avons quelque test nous pouvons lancer la commande NPM qui run les tests et regarder ce qui se passe.

Jest lance les tests et nous affiche dans la console le résultat. Vous pouvez utiliser l’argument « –watchAll » pour lancer Jest en mode « watch ».

Coder la librairie

Maintenant que nous avons écrit les tests, nous pouvons commencer à écrire la libraire MyMath. Chaque fois que nous sauvegardons, Jest run la série de test. Quand tout est au vert et que tous les tests passent. Nous avons fini.

Voici à quoi pourrai resembler la librairie MyMath:

export const MyMath = {
  sum: (a = 0, b = 0) => {
    return (+a) + (+b)
  }
};

Conclusion

J’espère vous avoir donnés envie d’implémenter des tests unitaires dans vos projets. En tout cas si on vous demande de le faire pour un projet vous avez déjà une idée de comment cela fonctionne et comment implémenter les tests. Je vous montrerai dans les articles à venir comment aller plus loin avec Jest.

En attendant vous retrouverez tous les autres articles traitant du même sujet dans la section Programmation.

Et si vous avez besoin de support pour votre projet, je vous invite vous rendre sur le lien suivant pour définir ensemble une solution de support qui vous convienne.