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:
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:
// package.json
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}Nach dem Login kopieren
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: '#ddd', height: 100 }}>
<Text style={{ fontSize: 30 }}>{title}</Text>
<Text style={{ fontSize: 15, color }}>{text}</Text>
</View>
);
export default PostArea;Nach dem Login kopieren
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();
});Nach dem Login kopieren
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>
`;Nach dem Login kopieren
Ä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>Nach dem Login kopieren
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!
