Lingkungan Modern untuk Bereaksi Aplikasi Asli

Dalam artikel ini, kami akan mempertimbangkan proses pengaturan lingkungan Bereaksi Asli menggunakan expo-cli , Typecript , dan Jest .
Scriptres akan membantu kami menghindari kesalahan pengembangan dan menulis aplikasi seluler yang lebih efisien.

Alat-alat modern memungkinkan mengintegrasikan naskah dalam lingkungan pengembangan. Kami juga dapat menggunakan Kode VS yang mendukung Typeface.

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

Expo adalah toolkit yang menyederhanakan pembuatan aplikasi Bereaksi asli. Tutorial ini akan memberi Anda gambaran tentang bagaimana Anda dapat dengan cepat membuat aplikasi Bereaksi asli menggunakan Expo.

Membuat proyek

Pertama, kami memasang semua dependensi yang diperlukan untuk membuat templat aplikasi dari benang.

benang global add expo-cli

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

~ / expo init exampleApp
? Pilih templat: expo-templat-kosong-naskah
Silakan masukkan beberapa nilai konfigurasi awal.
? Benang v1.15.2 ditemukan. Gunakan Benang untuk menginstal dependensi? Ya

Sekarang kita dapat meluncurkan proyek dan mulai mengembangkan aplikasi.

cd exampleApp
benang mulai

Konfigurasi Tslint

Mari kita mengkonfigurasi tslint untuk menggunakan VSCode atau editor lain dengan benar dan melihat kesalahan pada tahap pengembangan. Ini akan memastikan gaya kode yang seragam dan mencegah komplikasi.

Pertama kita menginstal paket tslint di direktori global:
benang global tambahkan tslint

Selanjutnya kita buat konfigurasi tslint:
tslint --init

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

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

Selanjutnya, kami memeriksa 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 dalam proses pengembangan aplikasi.

Selain itu, untuk kenyamanan, kami menambahkan perintah untuk benang. Perintah-perintah ini dapat digunakan untuk pengembangan lokal atau untuk verifikasi pada tahap integrasi berkelanjutan.

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

Tslint juga memungkinkan untuk memperluas aturan validasi dengan menginstal plugin. Pada titik ini, kami akan menambahkan dukungan aturan eslint.

benang tambahkan tslint-eslint-rules --dev

Untuk menambahkan plugin ke konfigurasi tslint, kami menambahkan nama plugin ke bidang "extends":

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

Bercanda dan tes pada 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 - untuk mengkompilasi dan memproses kode tes naskah dalam Javascript
• @ types / jest - untuk menambahkan jenis dari lingkungan Jest
• react-native-testing-library - untuk merender komponen Bereaksi tanpa 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 menyesuaikannya dengan lingkungan Asli Bereaksi. 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, kita harus menambahkan perintah untuk menjalankan tes di package.json:

Uji: uji benang

Tes Menulis untuk Jest

Mari kita coba menulis tes sampel untuk Jest. Untuk melakukan ini, kita akan membuat 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, kami menjalankan 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. 

Jika Anda melakukan semua hal di atas dengan benar, tes harus berhasil. Tetapi Anda masih tidak dapat menulis tes untuk komponen. Mari kita memperluas lingkungan untuk menguji komponen React Native.

Kami membutuhkan satu paket lagi - reaksi-uji-renderer. Ini menyediakan mesin rendering khusus untuk Bereaksi dengan struktur Javascript pada output. Oleh karena itu, kita tidak perlu mengkonfigurasi DOM atau modul asli di lingkungan pengujian.

benang tambahkan -D bereaksi-uji-renderer

Selanjutnya kita memperbarui 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 telah memperoleh array elemen turunan untuk 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 berdasarkan tipe statis membuat aplikasi lebih stabil. Pengetikan yang kuat pada Typcript juga membantu menghindari kesalahan pengkodean.

Pengembangan tes untuk komponen Asli Bereaksi dalam Jest persis sama dengan untuk aplikasi Bereaksi reguler.

Saya harap artikel ini akan membantu Anda mengatasi tahap awal pengaturan lingkungan untuk mengembangkan aplikasi Asli Bereaksi.