اختبار react-hook-form باستخدام مكتبة react-native-testing

عند العمل مع مكتبة react-hook-form في تطبيقات React Native واستخدام react-native-testing-library لاختبار النماذج، قد تواجه بعض التحديات، مثل التحذير "لا يمكن إعطاء مراجع لمكونات الوظيفة". في هذا المقال، سنستعرض كيفية معالجة هذا التحذير ونتناول بعض النصائح الفعالة لاختبار نماذج الإدخال.

ما هو سبب الخطأ في استخدام مراجع المكونات؟

يحدث هذا التحذير عادةً بسبب محاولة استخدام مراجع (refs) مع مكونات الدالة القياسية. لا تدعم مكونات الدالة إخراج المراجع بشكل افتراضي، ولهذا نحتاج إلى تعديل مكوناتنا لاستخدام React.forwardRef(). تسهل هذه الطريقة التعامل مع المراجع وتسمح للمكونات أن تكون ذات قابلية عالية لإعادة الاستخدام.

كيفية استخدام React.forwardRef()

عند استخدامها، يمكنك تعديل مكون القائمة المنسدلة على النحو التالي:

import React, { forwardRef } from 'react';
import { View, TextInput } from 'react-native';
const Dropdown = forwardRef((props, ref) => {
    return (
        <View>
            <TextInput ref={ref} {...props} />
        </View>
    );
});
export default Dropdown;

بإضافة forwardRef، نكون قد مكنّا المكون من التعامل بشكل سليم مع المراجع، مما سيقلل من فرص ظهور التحذيرات.

اختبار قيمة الإدخال باستخدام react-native-testing-library

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

const mockedNavigation = { 
    goBack: jest.fn(), 
    navigation: jest.fn(), 
    setOptions: jest.fn(),
};
describe('اختبار نموذج جهة الاتصال', () => {
    const originalProps = {
        navigation: mockedNavigation,
    };
    test('يجب أن يظهر خطأ في تحقق البريد الإلكتروني', () => {
        const rendered = render(<YourComponent {...originalProps} />);
        const enterEmail = "test@test"
        const email = rendered.root.findByProps({ testID: 'email' });
        fireEvent.changeText(screen.getByTestId('email'), enterEmail);
        expect(email.props.style.color).toBe('#47474A');
    });
});

يعتبر هذا الاختبار مثالًا جيدًا على كيفية استخدام fireEvent لتغيير نص إدخال البريد الإلكتروني للتحقق من ظهور الأخطاء عندما تكون القيمة غير صحيحة.

نقاط يجب التفكير فيها لتحسين الاختبارات

• استخدام المراجع بحذر: من المهم معرفة متى وأين تستخدم المراجع عند العمل مع react-hook-form وreact-native-testing-library.
• التأكد من صحة البيانات: احرص دائمًا على تنفيذ اختبارات للقيم الصحيحة والخاطئة لضمان أن مكوناتك تتصرف كما هو متوقع.
• مراجعة المعلومات السلوكية: تأكد من أنك قد راجعت سلوكيات التسجيل والأخطاء لتكون قادراً على فهم متطلبات نموذجك بذكاء.

خاتمة

تعتبر معالجة التحذيرات المرتبطة بمكونات الوظيفة خطوة مهمة في بناء تطبيقات فعّالة باستخدام react-hook-form وreact-native-testing-library. بالإضافة إلى ذلك، يتطلب الأمر بعض الجهد الإضافي لفهم كيفية اختبار المدخلات بشكل صحيح. باتباع النصائح المذكورة أعلاه، يمكنك تحسين اختباراتك وجعلها أكثر قوة وموثوقية. تذكر دائمًا استخدام React.forwardRef() عند الحاجة إلى التعامل مع المراجع، مما سيساهم في تقليل التحذيرات ويساعدك في بناء تطبيقات أفضل.