Comment configurer Jest pour les tests React ?

Alors que de plus en plus de développeurs adoptent React comme framework frontal de choix, il devient de plus en plus important de s'assurer que le code que nous écrivons est de la plus haute qualité. Un aspect important de l'assurance qualité est le test, et Jest est un framework de test populaire qui est souvent utilisé avec React.

Jest est un framework de test open source construit par Facebook, et il est conçu pour rendre le test de votre code JavaScript aussi simple et efficace que possible. Il est rapide, possède une API facile à utiliser et est livré avec un certain nombre de fonctionnalités intégrées qui facilitent les tests.

Dans cet article, nous vous guiderons tout au long du processus de configuration des tests Jest for React. Nous couvrirons tout ce que vous devez savoir pour commencer, de l'installation de Jest à la rédaction de votre premier cas de test.

Jest pour les tests de réaction

Jest est un framework de test populaire utilisé pour tester les applications React. Il est créé par Facebook et est connu pour sa facilité d'utilisation et sa rapidité d'installation. Jest est conçu pour fonctionner avec React prêt à l'emploi et fournit de nombreuses fonctionnalités pour faciliter les tests.

Voici quelques-unes des fonctionnalités qui font de Jest un choix populaire pour tester les applications React :

i) Test d'instantané : Jest fournit une fonctionnalité de test d'instantané qui vous permet de comparer la sortie actuelle d'un composant avec un instantané précédemment stocké. Cela permet de vérifier facilement si des modifications involontaires ont été apportées à la sortie du composant.

ii) Mocking : Jest fournit des fonctionnalités de moquerie intégrées qui vous permettent de créer des fonctions et des modules fictifs. Ceci est utile lorsque vous devez simuler le comportement d'une fonction ou d'un module qui n'est pas facilement disponible ou difficile à tester.

iii) Couverture de code : Jest fournit un rapport de couverture de code qui indique le pourcentage de code couvert par vos tests. Ceci est utile pour identifier les zones de votre code qui ne sont pas testées et qui peuvent nécessiter une attention supplémentaire.

iv) Tests asynchrones : Jest facilite le test de code asynchrone en fournissant des utilitaires pour gérer le code asynchrone. Cela vous permet d'écrire des tests qui attendent la résolution des promesses ou d'un autre code asynchrone avant de faire des assertions.

v) Configuration facile : Jest est facile à installer et à configurer pour votre application React. Il est livré avec une configuration par défaut qui fonctionne prête à l'emploi, mais peut être personnalisée pour répondre à vos besoins spécifiques.

Dans l'ensemble, Jest est un cadre de test puissant et flexible qui facilite le test des applications React. Ses nombreuses fonctionnalités et sa configuration facile en font un choix populaire pour les développeurs qui souhaitent écrire des tests fiables pour leurs composants React.

Configuration de Jest pour les tests de réaction

Vous devez suivre certaines étapes pour configurer les tests Jest for React en 2023.

1) Installez Jest

Jest peut être installé dans votre projet en utilisant npm ou yarn. Voici les étapes pour installer Jest en utilisant npm :

i) Ouvrez votre terminal ou votre invite de commande et accédez au répertoire de votre projet.

ii) Exécutez la commande suivante pour installer Jest en tant que dépendance de développement dans votre projet :

npm install –save-dev plaisanterie

Cette commande installera Jest et l'ajoutera au fichier package.json de votre projet sous la section devDependencies.

Une fois l'installation terminée, vous pouvez commencer à écrire vos tests avec Jest. Vous pouvez exécuter vos tests à l'aide de la commande npm test. Par défaut, Jest recherche les fichiers de test nommés avec l'extension .test.js ou .spec.js . Cependant, vous pouvez configurer Jest pour rechercher des tests avec d'autres extensions en modifiant la propriété testMatch dans votre fichier de configuration Jest.

C'est ça! Jest est maintenant installé dans votre projet et vous pouvez commencer à écrire des tests pour votre application.

2) Créer un fichier de configuration

Pour créer un fichier de configuration pour Jest, vous pouvez créer un fichier nommé jest.config.js dans le répertoire racine de votre projet. Ce fichier contiendra les options de configuration que Jest doit utiliser lors de l'exécution des tests.

Voici un exemple de fichier de configuration :

module.exports = {

// Indique quels types de fichiers doivent être considérés comme des fichiers de test.

TestMatch : [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(spec|test).js?(x)'

],

// Une liste des chemins vers les répertoires que Jest doit utiliser pour rechercher des fichiers dans.

racines : ['<répracine>/src'],

// Une carte des expressions régulières aux chemins vers les transformateurs.

transformer: {

'^.+\\.(js|jsx|ts|tsx)$' : 'babel-jest'

},

// Les modèles glob que Jest utilise pour détecter les fichiers de test.

testPathIgnorePatterns : [

'<rootDir>/node_modules/',

'<rootDir>/build/'

],

// Une liste de noms de reporters que Jest utilise lors de la rédaction de rapports de couverture.

couvertureReporters : ['json', 'text', 'html'],

// Un tableau d'extensions de fichiers utilisées par vos modules.

moduleFileExtensions : ['js', 'json', 'jsx']

} ;

Cet exemple de fichier de configuration spécifie les options suivantes :

a) testMatch : spécifie le modèle utilisé pour identifier les fichiers de test.

b) racines : spécifie les répertoires dans lesquels Jest doit rechercher les fichiers.

c) transform : spécifie les transformations que Jest doit appliquer aux fichiers avant d'exécuter les tests.

d) testPathIgnorePatterns : spécifie les modèles à ignorer lors de la recherche de fichiers de test.

e) coverReporters : spécifie les reporters que Jest doit utiliser pour générer des rapports de couverture.

f) moduleFileExtensions : spécifie les extensions de fichier que Jest doit rechercher lors de la recherche de fichiers.

Vous pouvez modifier ce fichier de configuration en fonction des besoins de votre projet. Une fois que vous avez créé votre fichier de configuration, Jest l'utilisera automatiquement lors de l'exécution de tests dans votre projet.

3) Rédigez vos tests

Une fois Jest installé et votre fichier de configuration configuré, vous pouvez commencer à écrire des tests pour votre application React. Voici les étapes pour créer un fichier de test et rédiger un test :

i) Créez un nouveau fichier avec l'extension .test.js ou .spec.js . Ce sera votre fichier de test.

ii) Dans le fichier de test, importez le composant ou la fonction que vous souhaitez tester :

import { somme } de './myFunctions' ;

iii) Rédigez votre test. Un test est une fonction qui utilise l'API Jest pour vérifier que le composant ou la fonction se comporte comme prévu :

décrire('somme', () => {

test('ajoute 1 + 2 pour égaler 3', () => {

attendre(somme(1, 2)).toBe(3);

});

});

Dans cet exemple, nous testons une fonction de somme simple qui additionne deux nombres. La fonction describe regroupe les tests associés, tandis que la fonction test spécifie un seul cas de test. La fonction expect vérifie que la fonction sum renvoie la valeur attendue.

iv) Exécutez vos tests en exécutant la commande npm test dans le répertoire de votre projet. Jest recherchera des fichiers de test dans votre projet et exécutera tous les tests qu'il trouvera.

Vous pouvez ajouter autant de tests que nécessaire pour couvrir toutes les fonctionnalités de votre composant ou fonction. Jest fournit une large gamme de correspondances et d'autres utilitaires que vous pouvez utiliser pour créer des tests plus complexes.

En écrivant des tests pour votre application React, vous pouvez vous assurer que votre code fonctionne comme prévu et éviter d'introduire des régressions lorsque vous apportez des modifications à votre base de code.

4) Exécutez vos tests

Pour exécuter vos tests à l'aide de Jest, vous pouvez utiliser la commande npm test dans le répertoire de votre projet. Jest détectera et exécutera automatiquement tous les fichiers de test de votre projet qui correspondent au modèle spécifié dans votre fichier de configuration Jest.

Lorsque vous exécutez le test npm, Jest affichera les résultats de vos tests dans la console. Si tous les tests réussissent, Jest affichera un résumé des résultats du test :

PASS src/components/Example.test.js

✓ rend sans plantage (21ms)

Suites de tests : 1 réussie, 1 au total

Tests : 1 réussi, 1 au total

Instantanés : 0 au total

Temps : 3.204s, estimé 4s

A exécuté toutes les suites de tests.

Si l'un des tests échoue, Jest affichera un message d'erreur décrivant l'échec et l'emplacement du test défaillant :

ÉCHEC src/composants/Example.test.js

• Exemple de composant › s'affiche sans plantage

TypeError : Impossible de lire la propriété 'map' d'undefined

10 | rendre() {

11 | const { éléments } = this.props ;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

à Example.render (src/components/Example.js:12:17)

à ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

à Object.<anonymous> (src/components/Example.test.js:9:16)

Suites de tests : 1 échec, 1 au total

Tests : 1 échoué, 1 au total

Instantanés : 0 au total

Temps : 3.537s, estimé 4s

A exécuté toutes les suites de tests.

Jest propose également une gamme d'options que vous pouvez utiliser pour personnaliser le comportement de vos tests, telles que l'exécution de tests en mode veille, la génération de rapports de couverture de code, etc. Vous pouvez trouver plus d'informations sur ces options dans la documentation de Jest.

Emballer

LambdaTest est une puissante plate-forme de test basée sur le cloud qui peut être utilisée conjointement avec Jest pour tester les applications React. En tirant parti de l'évolutivité de l'infrastructure basée sur le cloud de LambdaTest, vous pouvez exécuter rapidement et efficacement vos tests Jest sur une large gamme de navigateurs et d'appareils, en vous assurant que votre application fonctionne comme prévu dans différents environnements.

Dans ce blog, nous avons couvert les étapes nécessaires pour configurer Jest pour tester les applications React. Nous avons également appris à configurer Jest pour utiliser LambdaTest comme environnement de test, écrire des tests à l'aide de Jest et exécuter des tests sur l'infrastructure cloud de LambdaTest.

L'utilisation conjointe de LambdaTest et Jest fournit une solution de test robuste pour les développeurs React qui peut les aider à détecter les régressions et les bogues tôt dans le cycle de développement, améliorant ainsi la qualité globale de leurs applications.

Ainsi, si vous cherchez à rationaliser votre flux de travail de test React, envisagez d'utiliser LambdaTest et Jest ensemble pour réaliser des tests complets, évolutifs et efficaces pour vos applications React.