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.

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.

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"
 }

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;

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

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

// 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 wir den ursprünglichen Code: Ändern Sie die Schriftgröße der zweiten Zeile