Qu'est-ce que la plaisanterie ? Utilisation de base de Jest

Le contenu de cet article porte sur qu'est-ce que Jest ? L'introduction des connaissances liées à Jest a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1 Qu'est-ce que Jest ?

Jest

Jest est le framework de test JavaScript open source de Facebook, qui intègre automatiquement les assertions, JSDom, la couverture rapports et autres outils de test dont les développeurs ont besoin, il s'agit d'un cadre de test avec une configuration presque nulle. Et c’est très convivial pour tester React, également le framework front-end open source de Facebook.

2 Installer Jest

2.1 Initialiser package.json

Entrez la commande suivante dans le shell pour initialiser le projet frontal et générer le package. json :

npm init -y

2.2 Installer Jest et les dépendances associées

Entrez les commandes suivantes dans le shell pour installer les dépendances requises pour les tests :

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest , babel-core, Les dépendances de regenerator-runtime et babel-preset-env permettent que nous puissions utiliser les fonctionnalités de syntaxe d'ES6 pour les tests unitaires. La méthode d'importation fournie par ES6 pour importer des modules n'est pas prise en charge par Jest lui-même.

2.3 Ajoutez le fichier .babelrc

Ajoutez le fichier .babelrc dans le répertoire racine du projet, et copiez le contenu suivant dans le fichier :

{ 
 "presets": ["env"]
}

2.4 Modifier package.json Le script de test

ouvre le fichier package.json et change la valeur de test sous script en jest :

"scripts": {
  "test": "jest"
  }

3. Écrivez votre premier test Jest <. 🎜 >

Créez les répertoires src et test et les fichiers associés

Créez le répertoire src dans le répertoire racine du projet et ajoutez le fichier function.js dans le répertoire src

Dans le répertoire racine du projet Créez le répertoire test sous le répertoire test et créez le fichier function.test.js dans le répertoire test

Jest trouvera automatiquement tous les fichiers de test nommés à l'aide des fichiers .spec.js ou .test.js dans le projet et les exécutons. Habituellement, nous La convention de dénomination à suivre lors de l'écriture des fichiers de test est la suivante : le nom du fichier de test = le nom du module testé + .test.js. Par exemple, le module testé est. Functions.js, le fichier de test correspondant est nommé Functions.test.js.

Créez le module testé dans src/functions.js

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

Créez un scénario de test dans le fichier test/functions.test.js

import functions  from '../src/functions';
test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

Exécutez npm exécutez le test, Jest affichera le message suivant dans le shell :

PASS  test/functions.test.js
  √ sum(2 + 2) 等于 4 (7ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

4. Plusieurs assertions Jest couramment utilisées

expect( dans les fonctions de scénario de test ci-dessus .sum(2, 2)).toBe(4) est une assertion. Jest nous fournit la fonction expect pour envelopper la méthode testée et renvoyer un objet, qui contient une série de correspondants pour nous permettre de rendre les assertions plus pratiques, la fonction toBe ci-dessus est un matcher. Introduisons plusieurs assertions Jest couramment utilisées, qui impliquent plusieurs correspondants. Le modificateur

.not

//functions.test.js
import functions  from '../src/functions'
test('sum(2, 2) 不等于 5', () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not vous permet de tester la situation lorsque le résultat n'est pas égal à une certaine valeur. C'est presque exactement la même chose que la syntaxe anglaise et c'est simple. comprendre.

.toEqual()

// functions.js
export default {
  getAuthor() {
      return {
            name: 'LITANGHUI',      
            age: 24,
    }
  }
}

// functions.test.js
import functions  from '../src/functions';
test('getAuthor()返回的对象深度相等', () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})
test('getAuthor()返回的对象内存地址不同', () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

.toEqual matcher vérifiera récursivement si tous les attributs et valeurs d'attribut de l'objet sont égaux, donc si vous souhaitez comparer les types d'applications , veuillez utiliser .toEqual matcher au lieu de .toBe.

.toHaveLength

// functions.js
export default {
  getIntArray(num) {
      if (!Number.isInteger(num)) {
            throw Error('"getIntArray"只接受整数类型的参数');
    }
        let result = [];    
        for (let i = 0, len = num; i < len; i++) {
      result.push(i);
    }    
    return result;
  }
}

// functions.test.js
import functions  from '../src/functions';
test('getIntArray(3)返回的数组长度应该为3', () => {
  expect(functions.getIntArray(3)).toHaveLength(3);
})

.toHaveLength peut être facilement utilisé pour tester si la longueur des types de chaîne et de tableau répond aux attentes.

.toThrow

// functions.test.js
import functions  from '../src/functions';
test('getIntArray(3.3)应该抛出错误', () => {
  function getIntArrayWrapFn() {
    functions.getIntArray(3.3);
  }
  expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
})

.toThorw peut nous permettre de tester si la méthode testée lève une exception comme prévu, mais ce qu'il faut noter lors de son utilisation est : nous devons utiliser un fonction pour créer un wrapper pour la fonction testée, tout comme getIntArrayWrapFn le fait ci-dessus, sinon l'assertion échouera car la fonction est lancée.

.toMatch

// functions.test.js
import functions  from '../src/functions';
test('getAuthor().name应该包含"li"这个姓氏', () => {
  expect(functions.getAuthor().name).toMatch(/li/i);
})

.toMatch passe une expression régulière, ce qui nous permet d'effectuer une correspondance régulière des types de chaînes.

5 Tester la fonction asynchrone

Installer axios

Ici, nous utilisons la bibliothèque de requêtes http axios la plus couramment utilisée pour le traitement des requêtes

npm install axios

Écrivez la fonction de requête http

Nous demanderons
http://jsonplaceholder.typicode.com/users/1, Il s'agit de l'adresse de requête fictive fournie par JSONPlaceholder

JSONPlaceholder

// functions.js
import axios from 'axios';
export default {
  fetchUser() {
      return axios.get('http://jsonplaceholder.typicode.com/users/1')
      .then(res => res.data)
      .catch(error => console.log(error));
  }
}

// functions.test.js
import functions  from '../src/functions';
test('fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象', () => {
  expect.assertions(1);  
  return functions.fetchUser()
    .then(data => {
      expect(data.name).toBe('Leanne Graham');
    });
})

Ci-dessus, nous avons appelé expect.assertions(1), qui garantit qu'il y a une assertion dans le scénario de test asynchrone Sera exécuté dans la fonction de rappel. Ceci est très efficace lors du test de code asynchrone.

Utilisez async et wait pour rationaliser le code asynchrone

test('fetchUser() 可以请求到一个用户名字为Leanne Graham', async () => {
  expect.assertions(1);
    const data =  await functions.fetchUser();
  expect(data.name).toBe('Leanne Graham')
})

Bien sûr, puisque nous avons installé Babel, pourquoi ne pas utiliser la syntaxe async et wait pour rationaliser notre code de test asynchrone ? oublier La méthode expect.assertions doit être appelée.

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!