دفع كل درس في هذه الدورة المنطقَ خارج الـ components إلى دوال نقية صغيرة: parseDistanceKm، وhikesReducer، وvalidateHikeForm، وpermissionAction، وtrackDistanceKm. ولم يكن ذلك من أجل الترتيب فقط. على الجوّال، التحقّق من تغيير يدويًا يعني إعادة البناء، والتشغيل، والتنقّل ثلاث شاشات إلى الداخل، والكتابة على لوحة مفاتيح محاكٍ. واختبار يتحقّق من الشيء نفسه في 20 جزءًا من الألف من الثانية، في كل مرة تحفظ فيها، أفضل مقايضة ستعقدها.
يضبط الـ preset الخاص بـ Expo، jest-expo، أداة Jest لـ React Native: يحوّل كود TypeScript وJSX، ويصنع mock للجانب الأصلي من وحدات Expo، فتعمل الاختبارات في Node دون جهاز. ثبّته مع React Native Testing Library:
npx expo install jest-expo jest @types/jest --dev\nnpx expo install @testing-library/react-native --devثم وجّه Jest إلى الـ preset في package.json:
{\n \"scripts\": {\n \"test\": \"jest --watchAll\"\n },\n \"jest\": {\n \"preset\": \"jest-expo\"\n }\n}يذكر دليل Expo أيضًا مُدخلًا لـ transformIgnorePatterns للحزم التي تُشحن بكود غير محوَّل؛ انسخه من هناك حين يفشل استيراد برسالة “SyntaxError: Cannot use import statement outside a module”. وضع الاختبارات في مجلّدات __tests__ بجوار الكود الذي تغطّيه.
لأداة التحليل من القسم 1 قواعد صغيرة كثيرة. وجدول من الحالات يوثّقها أفضل من النثر:
\nimport { parseDistanceKm } from '../parseDistance';\n\ntest.each([\n ['8.4', 8.4],\n ['8,4', 8.4],\n [' 12 km', 12],\n ['abc', null],\n ['0', null],\n ['1.2.3', null],\n])('parseDistanceKm(%j) is %p', (input, expected) => {\n expect(parseDistanceKm(input)).toBe(expected);\n});لاحظ أن حالات الاختبار هي بالضبط المدخلات الغريبة التي قلقت بشأنها حين كتبت الدالة: الفاصلة العشرية، والوحدة اللاحقة، والصفر. كل بلاغ عن خطأ يصبح صفًّا إضافيًا في جدول كهذا، يُكتب قبل الإصلاح، فلا يستطيع الخطأ نفسه العودة بصمت أبدًا.
\nوالـ reducers تُعامَل بالطريقة نفسها: ابنِ state، وأرسل action، وتحقّق من النتيجة، وتحقّق أن المدخل لم يُعدَّل. هذه الاختبارات سريعة ومستقرّة ولا تحتاج إلى mocks، ولهذا يجب أن تشكّل معظم مجموعة اختباراتك.
\nترسم React Native Testing Library الـ components في الذاكرة، وتتيح لك الاستعلام عنها كما يدركها الناس: بالـ role والـ label والنص. هذا اختبار للـ component المسمّى QuickLog من القسم 1:
import { render, screen, userEvent } from '@testing-library/react-native';\nimport { QuickLog } from '../QuickLog';\n\ntest('saves a valid distance', async () => {\n const onSave = jest.fn();\n const user = userEvent.setup();\n await render(<QuickLog onSave={onSave} />);\n\n await user.type(screen.getByLabelText('Distance (km)'), '8,4');\n await user.press(screen.getByRole('button', { name: 'Save' }));\n\n expect(onSave).toHaveBeenCalledWith(8.4);\n});\n\ntest('keeps Save disabled until the distance is valid', async () => {\n const user = userEvent.setup();\n await render(<QuickLog onSave={jest.fn()} />);\n\n await user.type(screen.getByLabelText('Distance (km)'), 'far');\n\n expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();\n});لكي يعثر getByLabelText على الحقل، يحتاج الـ TextInput إلى accessibilityLabel="Distance (km)". وهذا بيت القصيد: الاختبار الذي يستعلم بالـ role والـ label يفشل حين تكون الشاشة غير قابلة للوصول، فتصبح اختباراتك فحصًا لإمكانية الوصول أيضًا. يحاكي userEvent التفاعلات الحقيقية (التركيز، وكتابة كل حرف، والضغط والإفلات)، وفي الإصدارات الحالية من المكتبة يكون كلٌّ من render والتفاعلات غير متزامن، فانتظرها بـ await. والـ matchers مثل toBeOnTheScreen() وtoHaveTextContent() وtoBeDisabled() تأتي مع المكتبة.
يضع jest-expo بدائل للوحدات الأصلية، لكن هذه البدائل لا تُرجع شيئًا مفيدًا. وحين يعتمد component على إجابة وحدة ما، اصنع لها mock بالإجابة التي تريد اختبارها:
import * as Location from 'expo-location';\n\njest.mock('expo-location', () => ({\n getForegroundPermissionsAsync: jest.fn(),\n requestForegroundPermissionsAsync: jest.fn(),\n}));\n\ntest('offers Settings after a permanent denial', async () => {\n jest.mocked(Location.getForegroundPermissionsAsync).mockResolvedValue({\n status: 'denied', granted: false, canAskAgain: false, expires: 'never',\n } as Location.LocationPermissionResponse);\n\n await render(<TrackScreen />);\n\n expect(await screen.findByRole('button', { name: 'Open Settings' })).toBeOnTheScreen();\n});استعلامات findBy… تنتظر ظهور العنصر، وهذا يناسب الشاشات التي تحمّل بشكل غير متزامن. اصنع الـ mocks عند حافة تطبيقك (الوحدات الأصلية، وfetch)، لا للـ components الخاصة بك، ليكون الكود قيد الاختبار هو الكود الذي تطلقه. والشاشات التي تستخدم hooks من Expo Router يمكن رسمها باستخدام renderRouter من expo-router/testing-library، الذي يجهّز router في الذاكرة بالمسارات التي تعطيه إياها.
لا تستطيع اختبارات الوحدات واختبارات الـ components التقاط build أصلي معطوب، أو نافذة إذن لا تظهر أبدًا، أو لوحة مفاتيح تغطّي زرّ Save. بضعة اختبارات end-to-end على builds حقيقية تغطّي ذلك: أدوات مثل Maestro (التي يستطيع EAS تشغيلها في السحابة) أو Detox تقود التطبيق الفعلي على محاكٍ. احتفظ بها للمسارات التي سيؤلم كسرها أكثر من غيرها، مثل تسجيل الدخول وتسجيل رحلة، ودع الاختبارات السريعة تغطّي كل ما عدا ذلك.
\nالتالي: تحويل التطبيق المختبَر إلى builds تستطيع الهواتف الحقيقية تثبيتها.
\n","toc":[{"id":"sec-1","text":"إعداد Jest","level":2},{"id":"sec-2","text":"ابدأ بالمنطق النقي","level":2},{"id":"sec-3","text":"اختبار الـ components كما يستخدمها المستخدم","level":2},{"id":"sec-4","text":"صنع mock للجهاز عند الحدود","level":2},{"id":"sec-5","text":"أين تقع اختبارات end-to-end","level":2}],"takeaways":["يضبط الـ preset المسمّى jest-expo أداة Jest لـ React Native، ويصنع mock للجانب الأصلي من وحدات Expo، فتعمل الاختبارات في Node دون جهاز.","الدوال النقية مثل أدوات التحليل والـ reducers ودوال التحقّق تعطي أكبر قدر من الثقة مقابل كل دقيقة من كتابة الاختبارات؛ فاختبرها أولًا.","ترسم React Native Testing Library الـ components وتتيح لك العثور على العناصر بالدور (role) والتسمية (label) والنص، كما يفعل المستخدمون وقارئات الشاشة.","في الإصدارات الحالية من المكتبة،render وتفاعلات userEvent غير متزامنة؛ فانتظرها بـ await.","اصنع mock للوحدات الأصلية مثل expo-location عند الحدود باستخدام jest.mock، واكتب الـ assertions على ما يراه المستخدم."],"further":[{"title":"Unit testing with Jest","url":"https://docs.expo.dev/develop/unit-testing/"},{"title":"React Native Testing Library","url":"https://testing-library.com/docs/react-native-testing-library/intro/"},{"title":"Jest mock functions","url":"https://jestjs.io/docs/mock-functions"}],"quiz":[{"q":"أيّ اختبار في Trailhead يعطي أكبر قدر من الثقة بأقل جهد؟
","options":[{"text":"لقطة (snapshot) لشاشة سجلّ الرحلات كلها.","why":"اللقطات تنكسر مع كل تغيير غير ضار في البنية، وتنجح بسرور حين يكون المنطق خاطئًا. ويتعلّم الناس تحديثها دون قراءتها."},{"text":"اختبار end-to-end ينقر عبر التطبيق على محاكٍ للتحقّق من أن “8,4” تُحلَّل.","why":"اختبارات end-to-end قيّمة للمسارات الحرجة، لكنها بطيئة وغير مستقرّة للتحقّق من قاعدة تحليل واحدة."},{"text":"جدول من المدخلات والمخرجات المتوقّعة لـparseDistanceKm وhikesReducer.","why":"صحيح. الدوال النقية تعمل في أجزاء من الثانية، ولا تحتاج إلى mocks، وتغطّي القواعد التي يعتمد عليها المستخدمون."}],"answer":2},{"q":"كيف يجب أن يعثر اختبار component على زرّ Save في Trailhead؟
","options":[{"text":"screen.getByRole('button', { name: 'Save' })","why":"صحيح. يعثر على ما يراه المستخدمون وقارئات الشاشة، ويفشل إن نسيت دور الزر، وهذا خطأ حقيقي في إمكانية الوصول."},{"text":"screen.getByTestId('save-btn-3')","why":"معرّفات الاختبار تعمل، لكنها تختبر تفصيلة تنفيذية وتفوّت مشكلات إمكانية الوصول. استخدمها كملاذ أخير."},{"text":"بقراءة الابن الثالث للـ View الجذري في الشجرة المرسومة.","why":"هذا ينكسر كلما تغيّر التخطيط، حتى حين يظل التطبيق يعمل."}],"answer":0},{"q":"يستدعي component الدالة Location.getForegroundPermissionsAsync(). في اختبار Jest تُرجع undefined، فيعرض الـ component مؤشّر تحميل إلى الأبد. ما الإصلاح الصحيح؟
process.env.NODE_ENV تساوي test.","why":"التفرّعات الخاصة بالاختبار في كود الإنتاج تعني أنك لم تعد تختبر الكود الذي تطلقه."},{"text":"غلّف الاستدعاء بـ try/catch لينجح الاختبار.","why":"لا شيء يرمي خطأ هنا؛ الـ mock لا يُرجع شيئًا فحسب. والـ catch لا يغيّر شيئًا ويُخفي الأخطاء الحقيقية."},{"text":"اصنع mock للوحدة باستخدام jest.mock('expo-location', …) بحيث تُحَلّ الدالة باستجابة إذن تختارها أنت.","why":"صحيح. أنت تتحكّم في الحدود، وتستطيع اختبار كل حالة (الممنوح، والمرفوض، والمرفوض نهائيًا)."}],"answer":3}],"exercise":{"kind":"fill","language":"tsx","template":"import { render, screen, userEvent } from '@testing-library/react-native';\nimport { HikeForm } from '../HikeForm';\n\ntest('shows an error, then saves once the distance is fixed', async () => {\n const onSave = jest.fn();\n const user = userEvent.{{0}}();\n await {{1}}(املأ الفراغات في اختبار React Native Testing Library هذا للـ component المسمّى HikeForm في Trailhead. يجب أن يجهّز أحداث المستخدم، ويرسم النموذج، ويضغط زرّ Save الذي يُعثر عليه بدوره (role)، ويتحقّق من ظهور خطأ المسافة على الشاشة، ثم يتحقّق أخيرًا من أن onSave استقبلت الرحلة الصحيحة.
userEvent إلى استدعاء لمرة واحدة يُرجع الكائن user، ويُركَّب الـ component بالدالة الرئيسية في المكتبة.","المستخدمون يضغطون الأزرار؛ والاستعلام يبحث عن دور إمكانية الوصول الذي يحصل عليه Pressable من accessibilityRole.","أحد الـ matchers يتحقّق أن العنصر على الشاشة؛ والآخر يتحقّق أن دالة mock استقبلت وسائط محدّدة."],"explanation":"ينشئ userEvent.setup() مستخدمًا يكتب ويضغط كإنسان حقيقي، وawait render(...) يركّب النموذج (والاثنان غير متزامنين في الإصدارات الحالية من المكتبة). ويعثر getByRole('button', { name: 'Save' }) على الزر بالطريقة التي يعثر بها قارئ الشاشة، فيحرس الاختبار إمكانية الوصول أيضًا. ويؤكّد toBeOnTheScreen() أن رسالة التحقّق رُسمت، ويتحقّق toHaveBeenCalledWith(expect.objectContaining(...)) من الرحلة المحفوظة دون الاعتماد على حقول لا تهمّ الاختبار، مثل المعرّف المولَّد.