البيئة الحديثة للتطبيقات الأصلية للتفاعل

في هذه المقالة ، سننظر في عملية إعداد بيئة React Native باستخدام expo- cli و Typescript و Jest .
سوف يساعدنا Typescript في تجنب أخطاء التطوير وكتابة تطبيق جوال أكثر كفاءة.

تتيح الأدوات الحديثة دمج Typescript في بيئة التطوير. يمكننا أيضًا استخدام VS Code الذي يدعم Typescript.

سوف يتيح لنا التكامل مع React Native الفرصة لاستخدام خدمة الإكمال التلقائي والتنقل عبر الرمز وإعادة المعالجة.

Expo عبارة عن مجموعة أدوات تعمل على تبسيط إنشاء تطبيقات React الأصلية. سيمنحك هذا البرنامج التعليمي فكرة عن كيفية إنشاء تطبيقات React الأصلية بسرعة باستخدام Expo.

إنشاء مشروع

أولاً ، نقوم بتثبيت جميع التبعيات اللازمة لإنشاء قالب التطبيق من الغزل.

غزل العالمي إضافة المعرض

بعد ذلك ، نقوم بتهيئة تطبيق React Native وتحديد قالب Typescript الفارغ.

~ / expo init exampleApp
؟ اختر قالبًا: expo-template-blank-typescript
الرجاء إدخال بعض قيم التكوين الأولية.
؟ تم العثور على الغزل v1.15.2. استخدام الغزل لتثبيت التبعيات؟ نعم

الآن يمكننا إطلاق المشروع والبدء في تطوير التطبيق.

القرص المضغوط exampleApp
بداية الغزل

تكوين Tslint

دعونا تكوين tslint لاستخدام VSCode أو محرر آخر بشكل صحيح ومشاهدة الأخطاء في مرحلة التطوير. وهذا يضمن نمط رمز موحد ومنع المضاعفات.

أولاً نثبت حزمة tslint في الدليل العالمي:
إضافة الغزل العالمية tslint

بعد ذلك نقوم بإنشاء تكوين tslint:
tslint - في

سيقوم هذا الأمر بإنشاء ملف tslint.json بالتكوين التالي:

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

بعد ذلك ، نتحقق من ملفات الحروف المطبوعة باستخدام التكوين الخاص بنا:
tslint 'src / ** / *. ts'

بعد ذلك ، سيستخدم VS Code تلقائيًا ملف التكوين للتحقق من صحة الرمز في المحرر. سيتم عرض أخطاء الكتابة في المحرر في عملية تطوير التطبيق.

أيضا ، للراحة ، نضيف أوامر للغزل. يمكن استخدام هذه الأوامر للتنمية المحلية أو للتحقق في مرحلة التكامل المستمر.

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

يجعل Tslint أيضًا من الممكن تمديد قواعد التحقق من الصحة عن طريق تثبيت المكونات الإضافية. في هذه المرحلة ، سنضيف دعم قواعد eslint.

إضافة الغزل tslint-eslint-rules --dev

لإضافة مكون إضافي إلى تكوين tslint ، نضيف اسم المكون الإضافي إلى حقل "يمتد":

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

المزاح والاختبارات على Typescript

Jest هو إطار لاختبار كود Javascript. يسهل اختبار ودعم وتطوير تطبيقات React Native.

تحتاج أولاً إلى تثبيت إطار العمل وإضافة دعم للطباعة النصية ، حيث تم كتابتها باستخدام دعم للكتابة الثابتة.

إضافة الغزل --dev jest ts-jest @ types / jest

يجدر أيضًا تثبيت حزم إضافية:

• ts-jest - لتجميع ومعالجة رمز اختبار النص في Javascript
• @ types / jest - لإضافة أنواع من بيئة Jest
• رد فعل اختبار مكتبة الأصلي - لتقديم مكونات React دون DOM

والخطوة الأخيرة هي إنشاء ملف تكوين للاختبارات:

خيوط ts-jest config: الحرف الأول

سيقوم هذا الأمر بإنشاء ملف تكوين من القالب. سنقوم بتكييفها مع البيئة الأصلية للرد. يجب أن يبدو الملف كما يلي:

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

وأخيرًا ، يجب أن نضيف الأمر لتشغيل الاختبارات في package.json:

اختبار: اختبار الغزل

اختبارات الكتابة للابتهاج

دعنا نحاول كتابة اختبار عينة لـ Jest. للقيام بذلك ، سنقوم بإنشاء ملف 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`); }); }); 

لتشغيل الاختبارات ، نقوم بتنفيذ أمر الغزل الذي تم إنشاؤه مسبقًا:

 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. 

إذا قمت بكل ما سبق بشكل صحيح ، فيجب أن تجتاز الاختبارات بنجاح. لكنك ما زلت غير قادر على كتابة اختبارات للمكونات. دعنا نوسع البيئة لاختبار مكونات React Native.

نحن بحاجة إلى حزمة واحدة أخرى - رد فعل اختبار العارض. يوفر محرك عرض خاص لـ React بهيكل Javascript على الإخراج. لذلك ، لا نحتاج إلى تكوين DOM أو الوحدات النمطية الأصلية في بيئة الاختبار.

الغزل إضافة -D رد فعل اختبار العارض

بعد ذلك نقوم بتحديث ملف App.test.tsx الخاص بنا من خلال اختبار بسيط لمكون 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!" ); }); }); 

يمكننا اختبار المكونات الأصلية في بيئة الاختبار. في هذا المثال ، حصلنا على مجموعة من العناصر الفرعية لعلامة النص. هذا مكون أصلي من حزمة React Native.

استنتاج

مكّنتنا هذه المجموعة التكنولوجية من تهيئة بيئة لتطوير التطبيقات المحلية بسرعة. منطق الأعمال القائم على أنواع ثابتة يجعل التطبيق أكثر استقرارا. الكتابة القوية لل Typescript تساعد أيضًا في تجنب أخطاء الترميز.

يعتبر تطوير اختبار المكونات التفاعلية React Native داخل Jest مطابقًا لتطبيقات React العادية.

آمل أن يساعدك هذا المقال في التغلب على المرحلة الأولى من إنشاء بيئة لتطوير تطبيقات React Native.