Ausführliche Erläuterung der Verwendung von Jest zum Testen nativer React-Komponenten

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie Sie Jest zum Testen nativer Komponenten im Projekt verwenden. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

Derzeit gibt es viele Javascript-Testtools, aber für die React-Teststrategie ist das von Facebook gestartete Standardtesttool 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.

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

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:

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

Wenn nicht, installieren Sie npm i jest --save-dev und fügen Sie den obigen Code zu The hinzu entsprechender Speicherort der 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.

Snapshot-Test

Schreiben Sie eine Komponente

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;

Suchen Sie den Ordner __test__ im Projektstammverzeichnis. Jetzt verwenden wir den Test-Renderer von React und den Snapshot von Jest Funktionalität zur Interaktion mit der Komponente, zum Erfassen der gerenderten Ausgabe und zum Erstellen einer Snapshot-Datei.

// 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 Folgendes aus:

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

› 1 Snapshot geschrieben.
Snapshot-Zusammenfassung
› 1 Snapshot geschrieben 1 Testsuite. Alle Testsuiten.

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, 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 auf 14.

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

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

Da dieser Code von uns absichtlich geändert wurde, wird beim Ausführen von jest -u der Snapshot angezeigt überschrieben werden. Wenn Sie „Jest“ erneut ausführen, wird kein Fehler gemeldet ~

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie eine übergeordnete Komponente, um in vue-prop einen Wert an eine untergeordnete Komponente zu übergeben

in Node.js Verwendung Cheerio, um einen einfachen Webcrawler zu erstellen (ausführliches Tutorial)

So implementieren Sie übergeordnete Komponenten, um mehrere Daten an untergeordnete Komponenten in Vue zu übergeben

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Jest zum Testen nativer React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!