Explication détaillée de l'utilisation de Jest pour tester les composants natifs de réaction

Cet article présente principalement en détail comment utiliser jest pour tester les composants natifs de réaction dans le projet. Maintenant, je le partage avec vous et vous donne une référence.

Il existe actuellement de nombreux outils de test Javascript, mais pour la stratégie de test React, l'outil de test standard ReactJs lancé par Facebook est l'adresse officielle du site Web de Jest.Jest : https://facebook.github.io/jest/. Nous pouvons voir que le site officiel de Jest revendique : Tests JavaScript indolores. Il s'agit du cadre de tests unitaires JavaScript de Facebook pour tester les services et les applications React.

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 commodité sur ces aspects.

Phase de préparation

Nécessite un projet rn 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 commande init de réaction native 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 :

Sinon, installez npm i jest --save-dev et ajoutez le code ci-dessus Ajoutez à l'emplacement correspondant de le fichier package.json.

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

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é

Écrivez un composant

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

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;

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

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

PASS __tests__PostArea_test.js (6,657s)

√ s'affiche correctement (5553 ms)

› 1 instantané écrit.

Résumé de l'instantané

› 1 instantané écrit en 1 suite de tests. toutes les suites de tests.

En même temps, un fichier sera généré dans le dossier de test, qui est l'instantané généré.

Modifiez le fichier source

La prochaine fois que vous exécuterez le test, la sortie rendue sera comparée à l'instantané créé précédemment. Les instantanés doivent être soumis avec le code. Lorsqu'un test d'instantané échoue, il doit être vérifié pour déceler des modifications intentionnelles ou non. Si les modifications sont comme prévu, appelez jest -u pour écraser l'instantané actuel.

Changeons le code original : changeons la taille de la police de la deuxième ligne à 14.

// 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>
`;

À ce moment-là, nous exécutons à nouveau jest. À ce moment-là, le terminal générera une erreur et indiquera l'emplacement de l'erreur

Parce que ce code a été intentionnellement modifié par nous, lorsque nous exécutons jest -u, l'instantané sera être écrasé. Si vous exécutez à nouveau Jest, aucune erreur ne sera signalée ~

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser le composant parent pour transmettre une valeur au composant enfant dans vue-prop

dans Node.js Utilisation cheerio pour créer un robot d'exploration Web simple (tutoriel détaillé)

Comment implémenter des composants parents pour transmettre plusieurs données aux composants enfants dans vue

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!