🖊️ 👂🏾 🧀 Test de code JavaScript avec Jest for dummies. Partie 1 😬 👨🏾‍💼 👪

Bonjour, Habr! Ce guide est la première partie d'une série d'articles prévus sur un cadre de test aussi génial que Jest. Le matériel sera utile pour les débutants et ceux qui viennent de se familiariser avec les tests et souhaitent étudier ce cadre. Dans la première partie, nous discuterons: comment démarrer avec jest, comment écrire un test simple et quelles méthodes existe-t-il pour comparer les valeurs à vérifier avec celles attendues. Peu importe - bienvenue à Kat!

Qu'est-ce que Jest?

Comme indiqué sur la page d'accueil du projet:

Jest est un incroyable environnement de test JavaScript axé sur la simplicité.

Et en effet, Jest est très simple. Il ne nécessite pas de paramètres supplémentaires, facile à comprendre et à utiliser, et possède également une très bonne documentation. Idéal pour les projets utilisant Node, React, Angular, Vue, Babel, TypeScript et plus encore.
Il est également open source et soutenu par Facebook.

Installation

Pour installer Jest dans votre projet, procédez comme suit:

npm install --save-dev jest

Si vous utilisez du fil:

yarn add --dev jest

Après l'installation, vous pouvez mettre à jour la section des scripts de votre package.json:

“scripts” : {
     “test”: “jest”
}

Avec ce simple appel, nous pouvons déjà exécuter nos tests (en fait, jest aura besoin d'au moins un test pour exister).

Vous pouvez également installer globalement (mais je ne recommanderais pas de le faire, car pour moi l'installation globale des modules est une mauvaise pratique):

npm install jest --global

Et en conséquence pour le fil:

yarn global add jest

Après cela, vous pouvez utiliser jest directement depuis la ligne de commande.

En appelant la commande jest --init à la racine du projet, après avoir répondu à quelques questions, vous obtiendrez le fichier de paramètres jest.config.js. Ou vous pouvez ajouter la configuration directement à votre package.json. Pour ce faire, ajoutez la clé "jest" à la racine json et dans l'objet correspondant, vous pouvez ajouter les paramètres dont vous avez besoin. Nous analyserons les options elles-mêmes ultérieurement. Ce n'est pas nécessaire à ce stade, car la plaisanterie peut être utilisée immédiatement, sans configurations supplémentaires.

Premier test

Créons le fichier first.test.js et écrivons notre premier test:

//first.test.js
test('My first test', () => {
    expect(Math.max(1, 5, 10)).toBe(10);
});

Et exécutez nos tests en utilisant npm run test ou directement avec la commande jest (si installée globalement). Après le lancement, nous verrons un rapport sur la réussite des tests.

 <b>PASS</b>  ./first.test.js
  ✓ My first test (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.618 s, estimated 1 s

Brisons notre test et exécutons à nouveau la plaisanterie:

//first.test.js
test('My first test', () => {
    expect(Math.max(1, 5, 10)).toBe(5);
});

Comme nous pouvons le voir, maintenant notre test ne passe pas le test. Jest affiche des informations détaillées sur l'origine du problème, le résultat attendu et ce que nous avons obtenu à la place.

Analysons maintenant le code du test lui-même. Fonction testutilisé pour créer un nouveau test. Il prend trois arguments (dans l'exemple, nous avons utilisé un appel avec deux arguments). La première est une ligne avec le nom du test, sa plaisanterie s'affichera dans le rapport. La seconde est une fonction qui contient la logique de notre test. Vous pouvez également utiliser le 3ème argument - timeout. Il est facultatif et sa valeur par défaut est de 5 secondes. Elle est définie en millisecondes. Ce paramètre est nécessaire lorsque nous travaillons avec du code asynchrone et renvoyons une promesse de la fonction de test. Il indique combien de temps la plaisanterie doit attendre pour que la promesse soit résolue. Passé ce délai, si la promesse n'a pas été autorisée - la plaisanterie considérera que le test a échoué. Vous trouverez plus d'informations sur l'utilisation des appels asynchrones dans les parties suivantes. Alternativement, vous pouvez l'utiliser () au lieu de test ().. Il n'y a aucune différence entre de tels appels. il () n'est qu'un alias de la fonction test () .

À l'intérieur de la fonction de test, nous appelons d'abord expect () . Nous lui transmettons la valeur que nous voulons vérifier. Dans notre cas, c'est le résultat de l'appel à Math.max (1, 5, 10) . expect () renvoie un objet wrapper qui a un certain nombre de méthodes pour comparer la valeur résultante avec celle attendue. L'une de ces méthodes que nous avons utilisées est toBe .

Examinons les principales de ces méthodes:

toBe() — , , . Object.is(). === 0 -0, NaN c NaN.

toEqual() — , . . . .

test('toEqual with objects', () => {
    expect({ foo: 'foo', subObject: { baz: 'baz' } })
        .toEqual({ foo: 'foo', subObject: { baz: 'baz' } });  // 
    expect({ foo: 'foo', subObject: { num: 0 } })
        .toEqual({ foo: 'foo', subObject: { baz: 'baz' } });  //    .
});

test('toEqual with arrays', () => {
    expect([11, 19, 5]).toEqual([11, 19, 5]); // 
    expect([11, 19, 5]).toEqual([11, 19]); // 
});

toContain() — . ===.

const arr = ['apple', 'orange', 'banana'];
expect(arr).toContain('banana');
expect(new Set(arr)).toContain('banana');
expect('apple, orange, banana').toContain('banana');

toContainEqual() — .

expect([{a: 1}, {b: 2}]).toContainEqual({a: 1});

toHaveLength() — length .

expect([1, 2, 3, 4]).toHaveLength(4);
expect('foo').toHaveLength(3);
expect({ length: 1 }).toHaveLength(1);

toBeNull() — null.
toBeUndefined() — undefined.
toBeDefined() — toBeUndefined. !== undefined.
toBeTruthy() — true. false, null, undefined, 0, NaN .
toBeFalsy() — toBeTruthy(). false.
toBeGreaterThan() toBeGreaterThanOrEqual() — , >, >=.
toBeLessThan() toBeLessThanOrEqual() — toBeGreaterThan() toBeGreaterThanOrEqual()

toBeCloseTo() — , , . .

const num = 0.1 + 0.2; // 0.30000000000000004
expect(num).toBeCloseTo(0.3);
expect(Math.PI).toBeCloseTo(3.14, 2);

toMatch() — .
```
expect('Banana').toMatch(/Ba/);
```
toThrow () - utilisé lorsqu'il est nécessaire de vérifier l'exception. Vous pouvez vérifier à la fois le fait de l'erreur elle-même et vérifier la levée d'exceptions d'une certaine classe, soit par le message d'erreur, soit par la correspondance du message avec l'expression régulière.
```
function funcWithError() {
    throw new Error('some error');
}   
expect(funcWithError).toThrow();
expect(funcWithError).toThrow(Error);
expect(funcWithError).toThrow('some error');
expect(funcWithError).toThrow(/some/);
```
non - cette propriété vous permet de vérifier l'inégalité. Il fournit un objet qui possède toutes les méthodes répertoriées ci-dessus, mais elles fonctionneront dans l'autre sens.
```
expect(true).not.toBe(false);
expect({ foo: 'bar' }).not.toEqual({});

function funcWithoutError() {}
expect(funcWithoutError).not.toThrow();
```

Écrivons quelques tests simples. Créez d'abord un module simple qui contiendra plusieurs méthodes de travail avec les cercles.

// src/circle.js
const area = (radius) => Math.PI * radius ** 2;
const circumference = (radius) => 2 * Math.PI * radius;
module.exports = { area, circumference };

Ensuite, ajoutez les tests:

// tests/circle.test.js
const circle = require('../src/circle');

test('Circle area', () => {
    expect(circle.area(5)).toBeCloseTo(78.54);
    expect(circle.area()).toBeNaN();
});

test('Circumference', () => {
    expect(circle.circumference(11)).toBeCloseTo(69.1, 1);
    expect(circle.circumference()).toBeNaN();
});

Dans ces tests, nous avons vérifié le résultat de 2 méthodes - surface et circonférence . En utilisant la méthode toBeCloseTo, nous avons vérifié le résultat attendu. Dans le premier cas, nous avons vérifié ou la zone calculée du cercle avec un rayon de 5 est approximativement égale à 78,54, tandis que la différence avec la valeur obtenue (elle sera 78,53981633974483) n'est pas grande et le test sera compté. Dans la seconde, nous avons indiqué que nous souhaitons vérifier à 1 décimale près. Nous avons également appelé nos méthodes sans argument et vérifié le résultat à l'aide de toBeNaN . Comme le résultat de leur exécution sera NaN, les tests seront passés avec succès.

Prenons un autre exemple. Créons une fonction qui filtrera un tableau de produits par prix:

// src/productFilter.js
const byPriceRange = (products, min, max) =>
         products.filter(item => item.price >= min && item.price <= max);
module.exports = { byPriceRange };

Et ajoutez un test:

// tests/product.test.js
const productFilter = require('../src/producFilter');

const products = [
    { name: 'onion', price: 12 },
    { name: 'tomato', price: 26 },
    { name: 'banana', price: 29 },
    { name: 'orange', price: 38 }
];

test('Test product filter by range', () => {
    const FROM = 15;
    const TO = 30;
    const filteredProducts = productFilter.byPriceRange(products, FROM, TO);

    expect(filteredProducts).toHaveLength(2);
    expect(filteredProducts).toContainEqual({ name: 'tomato', price: 26 });
    expect(filteredProducts).toEqual([{ name: 'tomato', price: 26 }, { name: 'banana', price: 29 }]);
    expect(filteredProducts[0].price).toBeGreaterThanOrEqual(FROM);
    expect(filteredProducts[1].price).toBeLessThanOrEqual(TO);
    expect(filteredProducts).not.toContainEqual({ name: 'orange', price: 38 });
});

Dans ce test, nous allons vérifier le résultat de la fonction byRangePrice . Tout d'abord, nous avons vérifié la correspondance de la longueur du tableau résultant avec celui attendu - 2. Le contrôle suivant nécessite que l'élément contienne l'élément - {nom: 'tomate', prix: 26}. L'objet du tableau et l'objet transmis à ContainEqual sont deux objets différents, pas une référence au même. Mais toContainEqual comparera chaque propriété. Étant donné que les deux objets sont identiques, la vérification réussira. Ensuite, nous utilisons toEqual pour vérifier la structure de l'ensemble du tableau et de ses éléments. Les méthodes toBeGreaterThanOrEqual et toBeLessThanOrEqual nous aideront à vérifier le prix du premier et du deuxième élément du tableau. Et enfin, en appelant not.toContainEqualvérifiera si l'élément est contenu dans le tableau - {nom: 'orange', prix: 38}, qui, par condition, ne devrait pas être là.

Dans ces exemples, nous avons écrit quelques tests simples en utilisant les fonctions de vérification décrites ci-dessus. Dans les parties suivantes, nous discuterons du travail avec le code asynchrone, les fonctions plaisanteries qui n'étaient pas couvertes dans cette partie du tutoriel, nous parlerons de sa configuration, et bien plus encore.

Test de code JavaScript avec Jest for dummies. Partie 1

Qu'est-ce que Jest?

Installation

Premier test

More articles: