So verwenden Sie Jest, um reagierende native Komponenten im Projekt zu testen

Es gibt derzeit viele Javascript-Testtools, aber für die React-Teststrategie ist das von Facebook gestartete Standardtesttool für ReactJs die offizielle Website-Adresse von Jest.Jest: https://facebook.github.io/jest/. Wir können sehen, dass die offizielle Website von Jest behauptet: Schmerzloses JavaScript-Testen. Ist Facebooks JavaScript-Unit-Test-Framework zum Testen von Diensten und React-Anwendungen. In diesem Artikel wird hauptsächlich die Verwendung von Jest zum Testen nativer Reaktionskomponenten im Projekt als Referenz für alle vorgestellt.

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:

1. Anpassbarkeit: Jest ist modular, erweiterbar und konfigurierbar.

2. Sandbox und schnell: Jest virtualisiert die JavaScript-Umgebung, kann den Browser simulieren und parallel ausführen

3. Snapshot-Test: Jest kann schnell schreiben Tests an Snapshots oder anderen serialisierten Werten des React-Baums, um eine schnell aktualisierte Benutzererfahrung bereitzustellen.

4. Unterstützt asynchrone Codetests: Unterstützt Versprechen und Async/Await

5. 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

Ein rn-Projekt ist erforderlich. 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, prüfen Sie, ob die Datei

package.json den folgenden Code enthält:

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

Wenn nicht, installieren Sie npm Ich scherze --save-dev und füge den obigen Code an der entsprechenden Stelle der Datei package.json hinzu.

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.

Snapshot-Test

Eine Komponente schreiben

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;

Gefunden im Stammverzeichnis des Projekts __test__-Ordner. Lassen Sie uns nun den Test-Renderer von React und die Snapshot-Funktionalität von Jest verwenden, um mit der Komponente zu interagieren, die gerenderte Ausgabe zu erfassen und eine Snapshot-Datei zu erstellen.

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

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

PASS __tests__PostArea_test.js (6.657s)
√ wird korrekt gerendert (5553ms)

› 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.

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

Ändern Sie die Quelldatei

Wenn Sie den Test das nächste Mal ausführen, stimmt die gerenderte Ausgabe mit der zuvor erstellten überein Snapshot Vergleichen. 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

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

Zu diesem Zeitpunkt haben wir Machen Sie noch einmal einen Scherz. Zu diesem Zeitpunkt gibt das Terminal einen Fehler aus und weist auf die Fehlerstelle hin

Da dieser Code von uns absichtlich geändert wurde, führen Sie zu diesem Zeitpunkt jest -u aus und einen Schnappschuss machen ist abgedeckt. Wenn Sie jest erneut ausführen, wird kein Fehler gemeldet~

Verwandte Empfehlungen:

Reagieren Sie auf die native benutzerdefinierte Komponente, um den Effekt der Schubladenmenüsteuerung zu implementieren

Über die Kommunikation zwischen React Native und Webview

Detaillierte Erläuterung der Verpackung der vertikalen Karussellkomponente von React Native

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Jest, um reagierende native Komponenten im Projekt zu testen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!