Quelles sont les étapes à suivre pour tester les composants natifs de réaction ?

Cette fois, je vais vous présenter les étapes pour tester les composants natifs de réaction avec jest. Quelles sont les précautions pour tester les composants natifs de réaction avec jest. Voici un cas pratique, jetons un coup d'œil.

Il existe actuellement de nombreux outils de test pour Javascript, mais pour la stratégie de test React, l'outil de test standard pour ReactJs lancé par Facebook est l'adresse officielle du site Web de 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. 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 :

Adaptabilité : Jest est modulaire, extensible et configurable.
Sandbox et rapide : Jest virtualise l'environnement JavaScript, peut simuler le navigateur et s'exécuter en parallèle
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.
Prend en charge les tests de code asynchrone : prend en charge les promesses et async/await
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

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.

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.

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

Test instantané

Écrire un composant

Trouvez le dossier test dans le répertoire racine du projet. Utilisons maintenant le moteur de rendu de test de React et. 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 testsPostArea_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é.

Modifiez le fichier source

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

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é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 à 14.

À ce moment-là, nous exécutons à nouveau jest. À ce moment, 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 écrasé. Si vous exécutez à nouveau jest, aucune erreur ne sera signalée ~

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Comment obtenir l'effet de défilement en boucle intermittente du texte JS

JS en ajoutant de nouveaux éléments

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!