Comment utiliser Jest pour tester les composants natifs de réaction du projet

Il existe actuellement de nombreux outils de test Javascript, mais pour la stratégie de test React, l'outil de test standard pour ReactJs lancé par Facebook est l'adresse du site officiel de Jest.Jest : https://facebook.github.io/jest/. Nous pouvons voir que le site officiel de Jest prétend : Painless JavaScript Testing. Il s'agit du cadre de tests unitaires JavaScript de Facebook pour tester les services et les applications React. Cet article présente principalement comment utiliser Jest pour tester les composants natifs de réaction du projet, comme référence pour tout le monde.

Le test dit unitaire consiste à tester chaque unité. En termes populaires, il cible généralement des fonctions, des classes ou des composants individuels, et n'implique pas de systèmes ni d'intégration. Les tests unitaires sont le test de base des tests logiciels. Jest possède principalement les fonctionnalités suivantes :

1. Adaptabilité : Jest est modulaire, extensible et configurable.

2. Sandbox et rapide : Jest virtualise l'environnement JavaScript, peut simuler le navigateur et s'exécuter en parallèle

3. Test instantané : Jest peut écrire rapidement des tests sur des instantanés ou d'autres valeurs sérialisées de l'arborescence React pour fournir une expérience utilisateur rapidement mise à jour.

4. Prend en charge les tests de code asynchrone : prend en charge les promesses et async/await

5. Génère automatiquement les résultats de l'analyse statique : affiche non seulement les résultats d'exécution du scénario de test, mais également couverture de la déclaration, de la succursale, de la fonction, etc.

Pourquoi utiliser des outils de tests unitaires

Pendant le processus de développement, nous pouvons toujours écrire notre propre code pour les tests unitaires sans utiliser d'outils de test, mais Nos codes ont une relation d'appel mutuelle.Pendant le processus de test, nous voulons rendre l'unité relativement indépendante et fonctionner normalement. Nous devons nous moquer des fonctions dépendantes et de l'environnement de la fonction testée, et effectuer la saisie des données de test, l'exécution des tests et là-bas. Il existe de nombreuses similitudes dans l'inspection des résultats des tests, et les outils de test nous offrent une certaine commodité dans ces aspects.

Phase de préparation

Un projet rn est requis. Ce qui est démontré ici est mon projet personnel ReactNative-ReduxSaga-TODO

Install jest.

Si vous avez créé le projet rn à l'aide de la ligne de commandereact-native init et que votre version rn est supérieure à 0,38, il n'est pas nécessaire de l'installer. Si vous n'êtes pas sûr, vérifiez si le fichier

package.json contient le code suivant :

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

Sinon, installez npm je plaisante --save-dev et j'ajoute le code ci-dessus à l'emplacement correspondant du fichier package.json.

Une fois les étapes ci-dessus terminées, exécutez simplement npm run test pour tester si jest est configuré avec succès. Mais nous n'avons pas écrit de scénario de test et le terminal n'imprimera aucun test trouvé. La configuration est maintenant terminée.

Test instantané

Écrire un composant

import React from 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: &#39;#ddd&#39;, height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

Trouvé dans le répertoire racine du projet Dossier __test__. Utilisons maintenant le moteur de rendu de test de React et la fonctionnalité d'instantané de Jest pour interagir avec le composant, capturer la sortie rendue et créer un fichier d'instantané.

// PostArea_test.js
import 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

Ensuite, exécutez npm run test ou jest dans le terminal. Affichera :

PASS __tests__PostArea_test.js (6,657s)
√ s'affiche correctement (5553 ms)

› 1 instantané écrit.
Résumé de l'instantané
› 1 instantané écrit dans 1 suite de tests.

Suites de tests : 1 réussi, 1 total
Tests : 1 réussi, 1 total
Instantanés : 1 ajouté, 1 total
Durée : 8,198 s 🎜> Exécution de toutes les suites de tests.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

Modifiez le fichier source

<Text style={{ fontSize: 14, color }}>{text}</Text>