Lingkungan modern untuk aplikasi Bereaksi Asli

Pada artikel ini, kita akan melihat pengaturan lingkungan Bereaksi Asli menggunakan expo-cli , Typescript , dan Jest .

Scriptres akan membantu kami menghindari kesalahan pengembangan dan menulis aplikasi seluler yang lebih efisien.

Perkembangan modern memungkinkan pengintegrasian naskah dalam lingkungan pengembangan. Kita juga bisa menggunakan VS Code, yang mendukung sepenuhnya Script.

Integrasi dengan React Native juga akan memberi kita kesempatan untuk menggunakan layanan penyelesaian otomatis, navigasi kode, dan refactoring.

Expo adalah seperangkat alat yang menyederhanakan pembuatan aplikasi Bereaksi asli. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan cepat membuat aplikasi Bereaksi asli menggunakan Expo.

Buat proyek

Pertama, instal dari utas semua dependensi yang diperlukan untuk membuat templat aplikasi.

benang global add expo-cli

Selanjutnya, kita menginisialisasi aplikasi React Native dan pilih templat Script kosong.

~/ 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 

Sekarang kita dapat memulai proyek dan mulai mengembangkan aplikasi.

cd exampleApp
benang mulai

Konfigurasi Tslint

Kami akan mengkonfigurasi tslint untuk menggunakan VSCode atau editor lain dengan benar dan melihat kesalahan pada tahap pengembangan. Dengan cara ini kami akan memastikan gaya kode yang seragam dan mencegah komplikasinya.

Pertama, kami menginstal paket tslint di direktori global:
benang global tambahkan tslint

Selanjutnya, buat konfigurasi tslint:
tslint --init

Perintah ini akan membuat file tslint.json dengan konfigurasi berikut:

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

Selanjutnya, cukup periksa file naskah menggunakan konfigurasi kami:
tslint 'src / ** / *. ts'

Setelah itu, VS Code akan secara otomatis menggunakan file konfigurasi untuk memvalidasi kode di editor. Ketik kesalahan akan ditampilkan di editor ketika mengembangkan aplikasi.

Juga, untuk kenyamanan, tambahkan perintah untuk benang. Mereka dapat digunakan untuk pengembangan lokal atau untuk verifikasi pada tahap integrasi berkelanjutan.
"Script": {
"Lint": "tslint '* .ts *'"
}

Tslint juga mendukung kemampuan untuk memperpanjang aturan validasi dengan menginstal plugin. Pada titik ini kami akan menambahkan dukungan eslint untuk aturan.
benang tambahkan tslint-eslint-rules --dev

Untuk menambahkan plugin ke konfigurasi tslint, cukup tambahkan nama plugin ke bidang extends:

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

Jest dan tes naskah

Jest adalah kerangka kerja untuk menguji kode Javascript. Ini memfasilitasi pengujian, dukungan, dan pengembangan aplikasi Asli Bereaksi.

Pertama, Anda perlu menginstal kerangka kerja dan menambahkan dukungan naskah, karena basis kode ditulis dengan dukungan untuk pengetikan statis.

benang tambahkan --dest jest ts-jest @ types / jest

Anda juga perlu menginstal paket tambahan:

• ts-jest - proses dan kompilasi kode tes naskah dalam javascript
• @ types / jest - tambahkan tipe dari lingkungan Jest
• react-native-testing-library - memungkinkan rendering komponen Bereaksi tanpa mengikat ke DOM

Dan langkah terakhir adalah membuat file konfigurasi untuk pengujian:

benang ts-jest config: init

Perintah ini akan menghasilkan file konfigurasi dari template. Kami akan mengubahnya sedikit untuk lingkungan Bereaksi Asli. File akan terlihat seperti ini:

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

Dan akhirnya, tambahkan perintah untuk menjalankan tes di package.json:

Uji: uji benang

Kami menulis tes untuk Jest

Mari kita coba menulis contoh tes untuk Jest. Untuk melakukan ini, buat file 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`); }); }); 

Untuk menjalankan tes, jalankan perintah benang yang dibuat sebelumnya:

 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. 

Semua tes berhasil. Tetapi untuk saat ini, kami tidak dapat menulis tes untuk komponen. Mari kita coba memperluas lingkungan kita untuk menguji komponen React Native.
Kami akan membutuhkan satu paket lagi - reaksi-uji-renderer. Ini menyediakan mesin rendering khusus untuk Bereaksi yang memberikan struktur Javascript dalam outputnya. Dengan demikian, kita tidak perlu mengkonfigurasi DOM atau modul asli di lingkungan pengujian.

benang tambahkan -D bereaksi-uji-renderer

Selanjutnya, perbarui file App.test.tsx kami dengan tes sederhana untuk komponen 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!" ); }); }); 

Kami dapat menguji komponen asli di lingkungan pengujian. Dalam contoh ini, kami mendapat array anak-anak dari tag Teks. Ini adalah komponen asli dari paket React Native.

Kesimpulan

Tumpukan teknologi ini memungkinkan kami untuk dengan cepat menciptakan lingkungan untuk mengembangkan aplikasi asli. Logika bisnis menggunakan tipe statis membuat aplikasi lebih stabil. Pengetikan yang kuat pada Typcript juga membantu menghindari kesalahan pengkodean.
Pengembangan tes di dalam Jest for React Komponen asli persis sama dengan aplikasi Bereaksi reguler.

Saya harap artikel ini membantu Anda mengatasi tahap awal pengaturan lingkungan untuk mengembangkan aplikasi React Native.