Moderne Umgebung für reaktive native Anwendungen

In diesem Artikel werden wir uns mit dem Einrichten einer React Native- Umgebung mit expo-cli , Typescript und Jest befassen .
Mit Typescript können wir Entwicklungsfehler vermeiden und eine effizientere mobile Anwendung schreiben.

Moderne Tools ermöglichen die Integration von Typescript in die Entwicklungsumgebung. Wir können auch VS-Code verwenden, der Typescript unterstützt.

Durch die Integration mit React Native können wir den Auto-Completion-Service, die Code-Navigation und das Refactoring nutzen.

Expo ist ein Toolkit, das die Erstellung nativer React-Anwendungen vereinfacht. Dieses Tutorial gibt Ihnen eine Vorstellung davon, wie Sie mit Expo schnell native React-Anwendungen erstellen können.

Ein Projekt erstellen

Zunächst installieren wir alle Abhängigkeiten, die zum Erstellen der Anwendungsvorlage aus Garn erforderlich sind.

Garn global add expo-cli

Als Nächstes initialisieren wir die React Native-Anwendung und wählen die leere Typescript-Vorlage aus.

~ / expo init exampleApp
? Wählen Sie eine Vorlage: expo-template-blank-typescript
Bitte geben Sie einige anfängliche Konfigurationswerte ein.
? Garn v1.15.2 gefunden. Verwenden Sie Garn, um Abhängigkeiten zu installieren? Ja

Jetzt können wir das Projekt starten und mit der Entwicklung der Anwendung beginnen.

cd exampleApp
Garnstart

Tslint-Konfiguration

Lassen Sie uns tslint so konfigurieren, dass VSCode oder ein anderer Editor korrekt verwendet wird und Fehler in der Entwicklungsphase angezeigt werden. Dies gewährleistet einen einheitlichen Codestil und verhindert Komplikationen.

Zuerst installieren wir das tslint-Paket im globalen Verzeichnis:
Garn global hinzufügen tslint

Als nächstes erstellen wir die tslint-Konfiguration:
tslint --init

Dieser Befehl erstellt die Datei tslint.json mit der folgenden Konfiguration:

{ "extends": ["tslint:recommended"], "jsRules": {}, "rules": {}, "rulesDirectory": [] } 

Als nächstes überprüfen wir die Typoskriptdateien mit unserer Konfiguration:
tslint 'src / ** / *. ts'

Danach verwendet VS Code automatisch die Konfigurationsdatei, um den Code im Editor zu validieren. Tippfehler werden während der App-Entwicklung im Editor angezeigt.

Der Einfachheit halber fügen wir Befehle für Garn hinzu. Diese Befehle können zur lokalen Entwicklung oder zur Überprüfung in der Phase der kontinuierlichen Integration verwendet werden.

 "scripts": { "lint": "tslint '*.ts*'" } 

Tslint ermöglicht es auch, Validierungsregeln durch die Installation von Plugins zu erweitern. An dieser Stelle werden wir die Unterstützung für Eslint-Regeln hinzufügen.

Garn hinzufügen tslint-eslint-Regeln --dev

Um der tslint-Konfiguration ein Plugin hinzuzufügen, fügen wir den Plugin-Namen in das Feld "Erweitert" ein:

 "extends": [ "tslint:recommended", "tslint-eslint-rules" ] 

Scherz und Tests auf Typoskript

Jest ist ein Framework zum Testen des Javascript-Codes. Es erleichtert das Testen, Unterstützen und Entwickeln von React Native-Anwendungen.

Zuerst müssen Sie das Framework installieren und Typoskript-Unterstützung hinzufügen, da die Codebasis mit Unterstützung für statische Typisierung geschrieben wurde.

Garn hinzufügen --dev Scherz ts-jest @ types / jest

Es lohnt sich auch, zusätzliche Pakete zu installieren:

• ts-jest - zum Kompilieren und Verarbeiten von Typoskript-Testcode in Javascript
• @ types / jest - zum Hinzufügen von Typen aus der Jest-Umgebung
• React-Native-Testing-Bibliothek - zum Rendern von React-Komponenten ohne DOM

Der letzte Schritt besteht darin, eine Konfigurationsdatei für die Tests zu erstellen:

Garn ts-jest config: init

Dieser Befehl generiert eine Konfigurationsdatei aus der Vorlage. Wir werden es auf die Umgebung von React Native zuschneiden. Die Datei sollte folgendermaßen aussehen:

 module.exports = { jest: { preset: "react-native", transform: { "^.+\\.js$": "./node_modules/react-native/jest/preprocessor.js", "\\.(ts|tsx)$": "ts-jest" }, globals: { "ts-jest": { tsConfig: "tsconfig.json" } }, moduleFileExtensions: ["ts", "tsx", "js"], testRegex: "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$" } }; 

Und schließlich sollten wir den Befehl hinzufügen, um die Tests in package.json auszuführen:

Test: Garnprüfung

Schreibtests für Scherz

Versuchen wir, einen Beispieltest für Jest zu schreiben. Dazu erstellen wir eine App.test.tsx-Datei:

 export const helloFn = (name?: String = "World") => `Hello, ${$name}`; describe("hello function", () => { it("should return `hello world`", () => { expect(helloFn()).toEqual(`Hello, World`); }); it("should return `hello name`", () => { expect(helloFn("Zuck")).toEqual(`Hello, Zuck`); }); }); 

Um die Tests auszuführen, führen wir den zuvor erstellten Garnbefehl aus:

 yarn test PASS ./App.test.tsx hello function ✓ should return `hello world` (4ms) ✓ should return `hello name` (1ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.316s Ran all test suites. Done in 2.74s. 

Wenn Sie alle oben genannten Schritte korrekt ausführen, sollten die Tests erfolgreich bestanden werden. Sie können jedoch immer noch keine Tests für Komponenten schreiben. Erweitern wir die Umgebung zum Testen von React Native-Komponenten.

Wir brauchen noch ein Paket - React-Test-Renderer. Es bietet eine spezielle Rendering-Engine für React mit einer Javascript-Struktur für die Ausgabe. Daher müssen wir weder DOM noch native Module in der Testumgebung konfigurieren.

Garn hinzufügen -D React-Test-Renderer

Als nächstes aktualisieren wir unsere App.test.tsx-Datei mit einem einfachen Test für die App.tsx-Komponente.

 import React from "react"; import renderer from "react-test-renderer"; import App from "./App"; describe("App", () => { it("should display welcome message", () => { const tree = renderer.create(<App />); expect(tree.toJSON()).toMatchSnapshot(); expect(tree.root.findByType("Text").children).toContain( "Open up App.tsx to start working on your app!" ); }); }); 

Wir können native Komponenten in der Testumgebung testen. In diesem Beispiel haben wir ein Array von untergeordneten Elementen für das Text-Tag erhalten. Dies ist eine native Komponente aus dem React Native-Paket.

Fazit

Mit diesem Technologie-Stack konnten wir schnell eine Umgebung für die Entwicklung nativer Anwendungen erstellen. Geschäftslogik basierend auf statischen Typen macht die Anwendung stabiler. Die starke Typisierung von Typescript hilft auch dabei, Codierungsfehler zu vermeiden.

Die Testentwicklung für React Native-Komponenten in Jest ist genau die gleiche wie für reguläre React-Anwendungen.

Ich hoffe, dieser Artikel hilft Ihnen dabei, die Anfangsphase der Einrichtung einer Umgebung für die Entwicklung von React Native-Anwendungen zu überwinden.