React Native Apps testen
Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →
Bei Facebook verwenden wir Jest, um React Native-Anwendungen zu testen.
Vertiefen Sie Ihr Verständnis für das Testen einer funktionierenden React Native-App anhand der folgenden Artikelreihe: Teil 1: Jest – Snapshots kommen ins Spiel und Teil 2: Jest – Redux Snapshots für Ihre Actions und Reducers.
Einrichtung
Ab React Native Version 0.38 ist eine Jest-Einrichtung standardmäßig enthalten, wenn Sie react-native init ausführen. Die folgende Konfiguration sollte automatisch zu Ihrer package.json-Datei hinzugefügt werden:
{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
Führen Sie yarn test aus, um Tests mit Jest zu starten.
Wenn Sie Ihre React Native-Anwendung aktualisieren und zuvor das Preset jest-react-native verwendet haben, entfernen Sie die Abhängigkeit aus Ihrer package.json-Datei und ändern Sie das Preset stattdessen in react-native.
Snapshot-Test
Erstellen wir einen Snapshot-Test für eine kleine Intro-Komponente mit einigen Ansichten, Textkomponenten und Stilen:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
class Intro extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
This is a React Native snapshot test.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
},
instructions: {
color: '#333333',
marginBottom: 5,
textAlign: 'center',
},
welcome: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},
});
export default Intro;
Verwenden wir nun den Test-Renderer von React und die Snapshot-Funktion von Jest, um mit der Komponente zu interagieren, die gerenderte Ausgabe zu erfassen und eine Snapshot-Datei zu erstellen:
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});
Wenn Sie yarn test oder jest ausführen, wird eine Ausgabedatei wie die folgende erzeugt:
exports[`Intro renders correctly 1`] = `
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#F5FCFF",
"flex": 1,
"justifyContent": "center",
}
}>
<Text
style={
Object {
"fontSize": 20,
"margin": 10,
"textAlign": "center",
}
}>
Welcome to React Native!
</Text>
<Text
style={
Object {
"color": "#333333",
"marginBottom": 5,
"textAlign": "center",
}
}>
This is a React Native snapshot test.
</Text>
</View>
`;
Beim nächsten Testlauf wird die gerenderte Ausgabe mit der zuvor erstellten Snapshot verglichen. Die Snapshot sollte zusammen mit Codeänderungen committet werden. Wenn ein Snapshot-Test fehlschlägt, müssen Sie prüfen, ob es sich um eine beabsichtigte oder unbeabsichtigte Änderung handelt. Wenn die Änderung erwartet wurde, können Sie Jest mit jest -u aufrufen, um den bestehenden Snapshot zu überschreiben.
Der Code für dieses Beispiel ist verfügbar unter examples/react-native.
Preset-Konfiguration
Das Preset richtet die Umgebung ein, setzt starke Konventionen durch und basiert auf dem, was wir bei Facebook als nützlich befunden haben. Alle Konfigurationsoptionen können überschrieben werden, genau wie sie angepasst werden können, wenn kein Preset verwendet wird.
Umgebung
react-native liefert ein Jest-Preset mit, daher sollte das Feld jest.preset in Ihrer package.json auf react-native verweisen. Das Preset ist eine Node-Umgebung, die die Umgebung einer React Native-App nachbildet. Da es keine DOM- oder Browser-APIs lädt, verbessert es die Startzeit von Jest erheblich.
Anpassung von transformIgnorePatterns
Die Option transformIgnorePatterns kann verwendet werden, um festzulegen, welche Dateien von Babel transformiert werden sollen. Viele react-native-npm-Module kompilieren ihren Quellcode leider nicht vor der Veröffentlichung vor.
Standardmäßig verarbeitet das jest-react-native-Preset nur die eigenen Quelldateien des Projekts und react-native. Wenn Sie npm-Abhängigkeiten haben, die transformiert werden müssen, können Sie diese Konfigurationsoption anpassen, indem Sie Module außer react-native einbeziehen, indem Sie sie gruppieren und mit dem |-Operator trennen:
{
"transformIgnorePatterns": ["node_modules/(?!((@)?react-native|my-project)/)"]
}
Sie können mit einem Tool wie diesem testen, welche Pfade übereinstimmen (und somit von der Transformation ausgeschlossen werden).
transformIgnorePatterns schließt eine Datei von der Transformation aus, wenn der Pfad mit einem der angegebenen Muster übereinstimmt. Das Aufteilen in mehrere Muster könnte daher unbeabsichtigte Ergebnisse haben, wenn Sie nicht vorsichtig sind. Im folgenden Beispiel heben sich die Ausschlüsse (auch als negative Lookahead-Assertions bekannt) für foo und bar gegenseitig auf:
{
"transformIgnorePatterns": ["node_modules/(?!foo/)", "node_modules/(?!bar/)"] // not what you want
}
setupFiles
Wenn Sie zusätzliche Konfiguration für jede Testdatei bereitstellen möchten, kann die Konfigurationsoption setupFiles verwendet werden, um Setup-Skripte anzugeben.
moduleNameMapper
Die moduleNameMapper-Option kann verwendet werden, um einen Modulpfad einem anderen Modul zuzuordnen. Standardmäßig ordnet das Preset alle Bilder einem Bild-Stub-Modul zu. Wenn jedoch ein Modul nicht gefunden werden kann, kann diese Konfigurationsoption helfen:
{
"moduleNameMapper": {
"my-module.js": "<rootDir>/path/to/my-module.js"
}
}
Tipps
Native Module mit jest.mock mocken
Das in react-native integrierte Jest-Preset enthält einige Standard-Mocks, die in einem React-Native-Repository angewendet werden. Einige React-Native-Komponenten oder Komponenten von Drittanbietern benötigen jedoch nativen Code für das Rendering. In solchen Fällen kann Jests manuelles Mock-System helfen, die zugrundeliegende Implementierung zu mocken.
Wenn Ihr Code beispielsweise von einer nativen Videokomponente eines Drittanbieters namens react-native-video abhängt, können Sie diese mit einem manuellen Mock wie folgt ersetzen:
jest.mock('react-native-video', () => 'Video');
Dadurch wird die Komponente als <Video {...props} /> mit allen ihren Props in der Snapshot-Ausgabe gerendert. Siehe auch Einschränkungen bei der Verwendung von Mocks mit Enzyme und React 16.
Manchmal benötigen Sie einen komplexeren manuellen Mock. Wenn Sie beispielsweise die Prop-Typen oder statischen Felder einer nativen Komponente an einen Mock weiterleiten möchten, können Sie mit diesem Helfer aus jest-react-native eine andere React-Komponente zurückgeben:
jest.mock('path/to/MyNativeComponent', () => {
const mockComponent = require('react-native/jest/mockComponent');
return mockComponent('path/to/MyNativeComponent');
});
Oder wenn Sie Ihren eigenen manuellen Mock erstellen möchten, können Sie etwa Folgendes tun:
jest.mock('Text', () => {
const RealComponent = jest.requireActual('Text');
const React = require('react');
class Text extends React.Component {
render() {
return React.createElement('Text', this.props, this.props.children);
}
}
Text.propTypes = RealComponent.propTypes;
return Text;
});
In anderen Fällen möchten Sie vielleicht ein natives Modul mocken, das keine React-Komponente ist. Dieselbe Technik kann angewendet werden. Wir empfehlen, den Quellcode des nativen Moduls zu untersuchen und seine Ausgabe auf einem echten Gerät zu protokollieren, um anschließend einen manuellen Mock nach diesem Vorbild zu erstellen.
Wenn Sie wiederholt dieselben Module mocken, empfiehlt es sich, diese Mocks in einer separaten Datei zu definieren und sie zur Liste der setupFiles hinzuzufügen.