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.

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

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

La prochaine fois que vous exécuterez le test, la sortie rendue correspondra à celle créée précédemment instantané Comparer. Les instantanés doivent être soumis avec le code. Lorsqu'un test d'instantané échoue, il doit être vérifié pour détecter toute modification intentionnelle 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 1951d14c80a732b7b6879cf93671d1cf à 14.

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

À ce stade, nous Exécutez à nouveau la plaisanterie. À 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, exécutez jest -u à ​​ce moment et prendre un instantané est couvert. Si vous exécutez à nouveau jest, aucune erreur ne sera signalée ~

Recommandations associées :

Composant personnalisé React Native pour implémenter l'effet de contrôle du menu du tiroir

À propos de la communication entre React Native et webview

Explication détaillée du packaging du composant carrousel vertical React Native

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!