Introduction à Jest : tests unitaires, simulation et code asynchrone-js tutoriel-php.cn

Introduction to Jest: Unit Testing, Mocking, and Asynchronous Code

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;
}

Copier après la connexion

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);
});

Copier après la connexion

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;
}

Copier après la connexion

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);
});

Copier après la connexion

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;
}

Copier après la connexion

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);
});

Copier après la connexion

Se moquer des dépendances injectées

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

Copier après la connexion

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);
}

Copier après la connexion

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;
}

Copier après la connexion

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");
});

Copier après la connexion

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);
});

Copier après la connexion

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;
}

Copier après la connexion

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);
});

Copier après la connexion

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';

Copier après la connexion

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);
}

Copier après la connexion

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;
}

Copier après la connexion

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");
});

Copier après la connexion

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);
});

Copier après la connexion