Welche Schritte sind für Jest erforderlich, um reagierende native Komponenten zu testen?

Dieses Mal werde ich Ihnen die Schritte zum Testen nativer React-Komponenten mit Scherz vorstellen. Was sind die Vorsichtsmaßnahmen zum Testen nativer React-Komponenten mit Scherz?

Derzeit gibt es viele Testtools für Javascript, aber für die React-Teststrategie ist das von Facebook gestartete Standardtesttool für ReactJs die offizielle Website-Adresse von Jest: https:/ /facebook.github.io/jest/. Wir können sehen, dass die offizielle Website von Jest behauptet: Schmerzloses JavaScript-Testen. Ist das JavaScript-Unit-Test-Framework von Facebook zum Testen von Diensten und React-Anwendungen. Der sogenannte Unit-Test dient dazu, jede Einheit zu testen. Im Volksmund wird er im Allgemeinen auf Funktionen, Klassen oder einzelne Komponenten abgezielt und bezieht sich nicht auf Systeme und Integration. Unit-Tests sind der grundlegende Test des Softwaretests. Jest verfügt hauptsächlich über die folgenden Funktionen:

Anpassbarkeit: Jest ist modular, erweiterbar und konfigurierbar.
Sandbox und schnell: Jest virtualisiert die JavaScript-Umgebung, kann den Browser simulieren und parallel ausführen
Snapshot-Test: Jest kann schnell schreiben Tests an Snapshots oder anderen serialisierten Werten des React-Baums, um eine schnell aktualisierte Benutzererfahrung bereitzustellen.
Unterstützt asynchrone Codetests: Unterstützt Versprechen und Async/Await
Generiert automatisch statische Analyseergebnisse: Zeigt nicht nur Ergebnisse der Testfallausführung an, sondern auch auch Anweisungs-, Zweig-, Funktions- usw. Abdeckung.

Warum Unit-Test-Tools verwenden

Während des Entwicklungsprozesses können wir immer noch unseren eigenen Code für Unit-Tests schreiben, ohne Test-Tools zu verwenden, aber Während des Testprozesses möchten wir die Einheit relativ unabhängig machen und normal ausführen. Wir müssen die abhängigen Funktionen und die Umgebung der zu testenden Funktion verspotten und die Testdateneingabe und -ausführung durchführen Es gibt viele Ähnlichkeiten bei der Überprüfung von Testergebnissen, und Testtools bieten uns in diesen Aspekten Komfort.

Vorbereitungsphase

Erfordert ein rn-Projekt. Was hier gezeigt wird, ist mein persönliches Projekt ReactNative-ReduxSaga-TODO

Jest installieren

Wenn Sie das rn-Projekt über die React-Native-Init-Befehlszeile erstellt haben und Ihre rn-Version höher als 0.38 ist, besteht keine Notwendigkeit, es zu installieren. Wenn Sie sich nicht sicher sind, überprüfen Sie, ob die Datei package.json den folgenden Code enthält:

Wenn nicht, installieren Sie npm i jest --save-dev und fügen Sie den obigen Code zum entsprechenden Speicherort hinzu die package.json-Datei.

Nachdem die oben genannten Schritte abgeschlossen sind, führen Sie einfach npm run test aus, um zu testen, ob Jest erfolgreich konfiguriert wurde. Aber wir haben keinen Testfall geschrieben und das Terminal gibt aus, dass keine Tests gefunden wurden. Die Konfiguration ist nun abgeschlossen.

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

Snapshot-Test

Schreiben Sie eine Komponente

Suchen Sie den Testordner im Projektstammverzeichnis. Jetzt verwenden wir den Test-Renderer von React Die Snapshot-Funktion von Jest ermöglicht die Interaktion mit der Komponente, die Erfassung der gerenderten Ausgabe und die Erstellung einer Snapshot-Datei.

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;

Führen Sie dann npm run test oder jest im Terminal aus. Gibt aus:

// 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,657 s)

√ wird korrekt gerendert (5553 ms)

› 1 Snapshot geschrieben.

Snapshot-Zusammenfassung
› 1 Snapshot in 1 Testsuite geschrieben.

Testsuiten: 1 bestanden, 1 insgesamt
Tests: 1 bestanden, 1 insgesamt
Snapshots: 1 hinzugefügt, 1 insgesamt

Zeit: 8,198 Sekunden 🎜> Alle Testsuiten ausgeführt.

Gleichzeitig wird eine Datei im Testordner ausgegeben, bei der es sich um den generierten Snapshot handelt.

Ändern Sie die Quelldatei

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

Wenn Sie den Test das nächste Mal ausführen, wird die gerenderte Ausgabe mit dem zuvor erstellten Snapshot verglichen. Snapshots sollten zusammen mit dem Code eingereicht werden. Wenn ein Snapshot-Test fehlschlägt, muss er auf absichtliche oder unbeabsichtigte Änderungen überprüft werden. Wenn die Änderungen wie erwartet sind, rufen Sie jest -u auf, um den aktuellen Snapshot zu überschreiben.

Ändern wir den ursprünglichen Code: Ändern Sie die Schriftgröße der zweiten Zeile

Zu diesem Zeitpunkt führen wir erneut „Jest“ aus. Zu diesem Zeitpunkt gibt das Terminal einen Fehler aus und gibt den Fehlerort an

Da dieser Code absichtlich von uns geändert wurde, wird der Snapshot überschrieben, wenn wir jest -u ausführen. Wenn Sie jest erneut ausführen, wird kein Fehler gemeldet ~

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So erzielen Sie den intermittierenden Loop-Scrolling-Effekt von JS-Text

JS fügt neue Elemente hinzu

Das obige ist der detaillierte Inhalt vonWelche Schritte sind für Jest erforderlich, um reagierende native Komponenten zu testen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!