Introduction à Jest : tests unitaires, simulation et code asynchrone

Introduction à la plaisanterie

Jest est une bibliothèque pour tester le code JavaScript.

Il s'agit d'un projet open source maintenu par Facebook, et il est particulièrement bien adapté aux tests de code React, sans toutefois s'y limiter : il peut tester n'importe quel code JavaScript. Ses atouts sont :

• c'est rapide
• il peut effectuer des tests d'instantanés
• il est avisé et fournit tout prêt à l'emploi sans vous obliger à faire des choix

export default function sum(a, n) {
  return a + b;
}

divide.test.js

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Matcheurs

Un matcher est une méthode qui vous permet de tester des valeurs.

• toBe compare l'égalité stricte, en utilisant ===
• toEqual compare les valeurs de deux variables. S'il s'agit d'un objet ou d'un tableau, il vérifie l'égalité de toutes les propriétés ou éléments
• toBeNull est vrai lors du passage d'une valeur nulle
• toBeDefined est vrai lors du passage d'une valeur définie (contrairement à ce qui précède)
• toBeUndefined est vrai lors du passage d'une valeur non définie
• toBeCloseTo est utilisé pour comparer des valeurs flottantes, en évitant les erreurs d'arrondi
• toBeTruthy true si la valeur est considérée comme vraie (comme un if)
• toBeFalsy true si la valeur est considérée comme fausse (comme le fait un if)
• toBeGreaterThan true si le résultat de expect() est supérieur à l'argument
• toBeGreaterThanOrEqual true si le résultat de expect() est égal à l'argument, ou supérieur à l'argument
• toBeLessThan true si le résultat de expect() est inférieur à l'argument
• toBeLessThanOrEqual true si le résultat de expect() est égal à l'argument, ou inférieur à l'argument
• toMatch est utilisé pour comparer des chaînes avec une correspondance de modèles d'expressions régulières
• toContain est utilisé dans les tableaux, vrai si le tableau attendu contient l'argument dans ses éléments set
• toHaveLength(number) : vérifie la longueur d'un tableau
• toHaveProperty(key, value) : vérifie si un objet a une propriété, et vérifie éventuellement sa valeur
• toThrow vérifie si une fonction que vous transmettez lève une exception (en général) ou une exception spécifique
• toBeInstanceOf() : vérifie si un objet est une instance d'une classe

Dépendances

Une dépendance est un morceau de code dont dépend votre application. Il peut s'agir d'une fonction/Objet dans notre projet ou d'une dépendance tierce (ex axios)

Un morceau de code devient une véritable dépendance lorsque votre propre application ne peut pas fonctionner sans lui.

Par exemple, si vous implémentez une fonctionnalité dans votre application pour envoyer des e-mails, faire des requêtes API ou créer un objet de configuration, etc.

Il existe deux façons d'ajouter des dépendances dans notre code dans un projet js :

Importations

export default function sum(a, n) {
  return a + b;
}

Injection de dépendance

Juste un terme sophistiqué sur un concept simple.

Si votre fonction a besoin de certaines fonctionnalités d'une dépendance externe, injectez-la simplement comme argument.

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Tests unitaires

Les tests unitaires sont écrits et exécutés par des développeurs de logiciels pour garantir qu'une section d'une application (appelée « unité ») répond à sa conception et se comporte comme prévu.

Nous voulons tester notre code de manière isolée, nous ne nous soucions pas de la mise en œuvre réelle des dépendances.
Nous voulons vérifier

• que notre unité de code fonctionne comme prévu
• renvoie les résultats attendus
• appelle tous les collaborateurs (dépendances) comme il se doit

Et c'est là que se moquer de nos dépendances entre en jeu.

Railleur

Dans les tests unitaires, les simulations nous offrent la capacité de supprimer la fonctionnalité fournie par une dépendance et un moyen d'observer comment notre code interagit avec la dépendance.

Les simulations sont particulièrement utiles lorsqu'il est coûteux ou peu pratique d'inclure une dépendance directement dans nos tests, par exemple, dans les cas où votre code effectue des appels HTTP à une API ou interagit avec la couche de base de données.

Il est préférable d'effacer les réponses de ces dépendances, tout en s'assurant qu'elles sont appelées selon les besoins. C'est là que les moqueries sont utiles.

En utilisant des fonctions fictives, nous pouvons connaître les éléments suivants :

• Le nombre d'appels qu'il a reçu.
• Argument valeurs utilisées à chaque invocation.
• Le « contexte » ou cette valeur à chaque invocation.
• Comment la fonction s'est terminée et quelles valeurs ont été produites.

Se moquer en plaisantant

Il existe plusieurs façons de créer des fonctions fictives.

• La méthode jest.fn nous permet de créer directement une nouvelle fonction mock.
• Si vous vous moquez d'une méthode objet, vous pouvez utiliser jest.spyOn.
• Et si vous souhaitez moquer un module entier, vous pouvez utiliser jest.mock.

La méthode jest.fn est, en elle-même, une fonction d'ordre supérieur.

C'est une méthode d'usine qui crée de nouvelles fonctions fictives inutilisées.

Les fonctions en JavaScript sont des citoyens de premier ordre, elles peuvent être transmises comme arguments.

Chaque fonction fictive a des propriétés spéciales. La propriété mock est fondamentale. Cette propriété est un objet qui contient toutes les informations d'état fictif sur la façon dont la fonction a été invoquée. Cet objet contient trois propriétés de tableau :

• Appels [arguments de chaque appel]
• Instances ['cette' valeur à chaque appel]
• Résultats [la valeur à laquelle la fonction est sortie], la propriété de résultats a un type (retour ou lancer) et une valeur
  • La fonction renvoie explicitement une valeur.
  • La fonction s'exécute jusqu'à la fin sans instruction de retour (ce qui équivaut à renvoyer undéfini
  • La fonction renvoie une erreur.

export default function sum(a, n) {
  return a + b;
}

• https://codesandbox.io/s/implementing-mock-functions-tkc8b

Maquette de base

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Se moquer des dépendances injectées

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Modules moqueurs

Se moquer d'une fonction avec jest.fn

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

Ce type de moquerie est moins courant pour plusieurs raisons :

• jest.mock le fait automatiquement pour toutes les fonctions d'un module
• jest.spyOn fait la même chose mais permet de restaurer la fonction d'origine

Maquette d'un module avec jest.mock

Une approche plus courante consiste à utiliser jest.mock pour définir automatiquement toutes les exportations d'un module vers la fonction Mock.

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

Espionner ou simuler une fonction avec jest.spyOn

Parfois, vous souhaitez uniquement voir une méthode être appelée, mais conserver l'implémentation d'origine. D'autres fois, vous souhaiterez peut-être vous moquer de l'implémentation, mais restaurer l'original plus tard dans la suite.

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

Restaurer l'implémentation d'origine

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

---

Javascript et la boucle d'événements

JavaScript est monothread : une seule tâche peut s'exécuter à la fois. Habituellement, ce n'est pas grave, mais imaginez maintenant que vous exécutez une tâche qui prend 30 secondes. Oui. Pendant cette tâche, nous attendons 30 secondes avant que quoi que ce soit d'autre puisse se produire (JavaScript s'exécute par défaut sur le thread principal du navigateur, donc toute l'interface utilisateur est bloquée).
Nous sommes en 2020, personne ne veut d’un site Web lent et qui ne répond pas.

Heureusement, le navigateur nous offre certaines fonctionnalités que le moteur JavaScript lui-même ne propose pas : une API Web. Cela inclut l'API DOM, setTimeout, les requêtes HTTP, etc. Cela peut nous aider à créer des async, comportements non bloquants

export default function sum(a, n) {
  return a + b;
}

• Call Stack - Lorsque nous invoquons une fonction, elle est ajoutée à quelque chose appelé la pile d'appels.
• WebAPI - setTimeout est fourni par WebAPI, prend une fonction de rappel et configure une minuterie sans bloquer le thread principal
• File d'attente - lorsque le minuteur se termine, le rappel est ajouté à la file d'attente
• Event Loop - vérifie si la pile d'appels est vide, vérifie s'il y a des rappels à exécuter dans la file d'attente et se déplace vers la pile d'appels à exécuter

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Tester le code asynchrone avec Jest

Jest s'attend généralement à exécuter les fonctions des tests de manière synchrone.

Si nous effectuons une opération asynchrone, mais que nous ne faisons pas savoir à Jest qu'il doit attendre la fin du test, cela donnera un faux positif.

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Modèles asynchrones
Il existe plusieurs modèles pour gérer les opérations asynchrones en JavaScript ; les plus utilisés sont :

• Rappels
• Promesses et asynchrone/attente

Test des rappels

Vous ne pouvez pas avoir de test dans un rappel, car Jest ne l'exécutera pas - l'exécution du fichier de test se termine avant que le rappel ne soit appelé. Pour résoudre ce problème, transmettez un paramètre à la fonction de test, que vous pouvez facilement appeler terminé. Jest attendra que vous appeliez done() avant de terminer ce test :

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

Promesses

Avec les fonctions qui renvoient des promesses, nous renvoyons une promesse du test :

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

Asynchrone/attendre

Pour tester les fonctions qui renvoient des promesses, nous pouvons également utiliser async/await, ce qui rend la syntaxe très simple et directe :

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

Conseils

• Nous devons avoir une bonne compréhension de ce que fait notre fonction et de ce que nous sommes sur le point de tester
• Pensez au comportement du code que nous testons
• Préparez le terrain :
  • Mock/Spy sur toutes les dépendances
  • Notre code interagit-il avec des objets globaux ? nous pouvons aussi nous moquer/espionner
  • Nos tests interagissent-ils avec le DOM ? nous pouvons créer de faux éléments avec lesquels travailler
  • Structurez vos tests
  • Étant donné...
  • Quand j'appelle....
  • Alors... j'attends.....

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

Links

• https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c
• https://jestjs.io/docs/en/mock-functions
• https://codesandbox.io/s/implementing-mock-functions-tkc8b
• https://github.com/BulbEnergy/jest-mock-examples
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://jestjs.io/docs/en/asynchronous
• https://www.pluralsight.com/guides/test-asynchronous-code-jest

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!