Environnement moderne pour les applications React Native

Dans cet article, nous verrons comment configurer un environnement React Native en utilisant expo-cli , Typescript et Jest .

Typo nous aidera à éviter les erreurs de développement et à écrire une application mobile plus efficace.

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

De plus, l' intégration avec React Native nous donnera l'opportunité d'utiliser le service d'auto-complétion, la navigation dans le code et le refactoring.

Expo est une suite d'outils qui simplifie la création d'applications natives de React. Dans ce didacticiel, je vais vous montrer comment créer rapidement des applications natives React à l'aide d'Expo.

Créer un projet

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

fil global add expo-cli

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

~/ expo init exampleApp ? Choose a template: expo-template-blank-typescript Please enter a few initial configuration values. Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed ? Yarn v1.15.2 found. Use Yarn to install dependencies? Yes 

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

cd exampleApp
début de fil

Configuration de Tslint

Nous allons configurer tslint pour utiliser correctement VSCode ou un autre éditeur et voir les erreurs au stade du développement. De cette façon, nous assurerons un style de code uniforme et éviterons sa complication.

Tout d'abord, nous installons le package tslint dans le répertoire global:
fil global ajouter tslint

Ensuite, créez la configuration tslint:
tslint --init

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

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

Ensuite, vérifiez simplement 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 saisie seront affichées dans l'éditeur lors du développement de l'application.

Aussi, pour plus de commodité, ajoutez des commandes pour le fil. Ils peuvent être utilisés pour le développement local ou pour la vérification au stade de l'intégration continue.
"Scripts": {
"Lint": "tslint '* .ts *'"
}

Tslint prend également en charge la possibilité d'étendre les règles de validation en installant des plugins. À ce stade, nous ajouterons le support eslint pour les règles.
fil ajouter tslint-eslint-rules --dev

Pour ajouter un plugin à la configuration tslint, ajoutez simplement le nom du plugin au champ extend:

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

Tests Jest et Typescript

Jest est un framework pour tester le code Javascript. Il facilite le test, le support et le développement d'une application React Native.

Vous devez d'abord installer le framework et ajouter la prise en charge du typage, car la base de code est é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 - traiter et compiler le code de test dactylographié en javascript
• @ types / jest - ajoute des types de l'environnement Jest
• react-native-testing-library - permet de rendre les composants React sans se lier au 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 allons le changer un peu pour l'environnement React Native. Le fichier ressemblera à 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, ajoutez la commande pour exécuter les tests dans package.json:

Test: test de fil

Nous écrivons des tests pour Jest

Essayons d'écrire un exemple de tests pour Jest. Pour ce faire, créez le 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, exécutez 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. 

Tous les tests ont réussi. Mais pour l'instant, nous ne pouvons pas écrire de tests pour les composants. Essayons d'étendre notre environnement pour tester les composants React Native.
Nous aurons besoin d'un package supplémentaire - react-test-renderer. Il fournit un moteur de rendu spécial pour React qui donne une structure Javascript dans sa sortie. Ainsi, nous n'avons pas besoin de configurer DOM ou de modules natifs dans un environnement de test.

ajout de fil -D react-test-renderer

Ensuite, mettez à 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 un environnement de test. Dans cet exemple, nous avons obtenu un tableau d'enfants à partir de 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 utilisant 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 dans Jest pour les composants natifs de React est exactement le même que pour une application React standard.

J'espère que cet article vous aidera à surmonter la phase initiale de configuration de l'environnement pour le développement d'applications React Native.