Environnement moderne pour les applications natives React

Dans cet article, nous examinerons le processus de configuration d'un environnement React Native à l'aide d' expo-cli , Typescript et Jest .
Typo nous aidera à éviter les erreurs de développement et à écrire une application mobile plus efficace.

Les outils modernes permettent d'intégrer Typescript dans l'environnement de développement. Nous pouvons également utiliser VS Code qui prend en charge Typescript.

L'intégration avec React Native nous donnera l'opportunité d'utiliser le service de saisie semi-automatique, la navigation dans le code et le refactoring.

Expo est une boîte à outils qui simplifie la création d'applications natives de React. Ce didacticiel vous donnera une idée de la façon dont vous pouvez créer rapidement des applications React natives à l'aide d'Expo.

Créer un projet

Tout d'abord, nous installons toutes les dépendances nécessaires pour créer le modèle d'application à partir de Yarn.

fil global add expo-cli

Ensuite, nous initialisons l'application React Native et sélectionnons le modèle Typescript vide.

~ / expo init exampleApp
? Choisissez un modèle: expo-template-blank-typescript
Veuillez saisir quelques valeurs de configuration initiales.
? Fil v1.15.2 trouvé. Utiliser Yarn pour installer les dépendances? Oui

Nous pouvons maintenant lancer le projet et commencer à développer l'application.

cd exampleApp
début de fil

Configuration de Tslint

Configurons tslint pour utiliser correctement VSCode ou un autre éditeur et voir les erreurs au stade du développement. Cela garantira un style de code uniforme et évitera les complications.

Nous installons d'abord le paquet tslint dans le répertoire global:
fil global ajouter tslint

Ensuite, nous créons la configuration tslint:
tslint --init

Cette commande créera le fichier tslint.json avec la configuration suivante:

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

Ensuite, nous vérifions les fichiers dactylographiés en utilisant notre configuration:
tslint 'src / ** / *. ts'

Après cela, VS Code utilisera automatiquement le fichier de configuration pour valider le code dans l'éditeur. Les erreurs de type seront affichées dans l'éditeur au cours du développement de l'application.

De plus, pour plus de commodité, nous ajoutons des commandes pour le fil. Ces commandes peuvent être utilisées pour le développement local ou pour la vérification au stade de l'intégration continue.

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

Tslint permet également d'étendre les règles de validation en installant des plugins. À ce stade, nous ajouterons le support des règles eslint.

fil ajouter tslint-eslint-rules --dev

Pour ajouter un plugin à la configuration tslint, nous ajoutons le nom du plugin dans le champ «extend»:

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

Jest et tests sur Typescript

Jest est un framework pour tester le code Javascript. Il facilite les tests, le support et le développement d'applications React Native.

Vous devez d'abord installer le framework et ajouter la prise en charge du typage, car la base de code a été écrite avec la prise en charge de la frappe statique.

ajout de fil --dev jest ts-jest @ types / jest

Il vaut également la peine d'installer des packages supplémentaires:

• ts-jest - pour compiler et traiter le code de test dactylographié en Javascript
• @ types / jest - pour ajouter des types à partir de l'environnement Jest
• react-native-testing-library - pour le rendu des composants React sans DOM

Et la dernière étape consiste à créer un fichier de configuration pour les tests:

config ts-jest: init

Cette commande va générer un fichier de configuration à partir du modèle. Nous l'adapterons à l'environnement React Native. Le fichier devrait ressembler à ceci:

 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)$" } }; 

Et enfin, nous devons ajouter la commande pour exécuter les tests dans package.json:

Test: test de fil

Écriture de tests pour Jest

Essayons d'écrire un exemple de test pour Jest. Pour ce faire, nous allons créer un fichier App.test.tsx:

 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`); }); }); 

Pour exécuter les tests, nous exécutons la commande de fil créée précédemment:

 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. 

Si vous effectuez toutes les opérations ci-dessus correctement, les tests devraient réussir. Mais vous ne pourrez toujours pas écrire de tests pour les composants. Développons l'environnement pour tester les composants React Native.

Nous avons besoin d'un package supplémentaire - react-test-renderer. Il fournit un moteur de rendu spécial pour React avec une structure Javascript sur la sortie. Par conséquent, nous n'avons pas besoin de configurer DOM ou de modules natifs dans l'environnement de test.

ajout de fil -D react-test-renderer

Ensuite, nous mettons à jour notre fichier App.test.tsx avec un simple test pour le composant App.tsx.

 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!" ); }); }); 

Nous pouvons tester des composants natifs dans l'environnement de test. Dans cet exemple, nous avons obtenu un tableau d'éléments enfants pour la balise Text. Il s'agit d'un composant natif du package React Native.

Conclusion

Cette pile technologique nous a permis de créer rapidement un environnement pour développer des applications natives. La logique métier basée sur des types statiques rend l'application plus stable. Le typage fort de Typescript permet également d'éviter les erreurs de codage.

Le développement des tests pour les composants React Native dans Jest est exactement le même que pour les applications React standard.

J'espère que cet article vous aidera à surmonter l'étape initiale de la mise en place d'un environnement de développement d'applications React Native.