ما الفرق بين getBy و queryBy و findBy في استعلامات React Testing Library؟

الإجابة المختصرة

دالة getBy تعيد العنصر فوراً أو تطلق خطأ إذا لم يوجد، و queryBy تعيد null عند عدم وجوده (مثالية لفحص الاختفاء)، بينما findBy غير متزامنة وتنتظر ظهور العنصر (مع معالجة الـ Promises والـ Animations).

الشرح

استخدم getBy للعناصر التي يجب أن تكون حاضرة في الـ DOM فوراً. استخدم queryBy عندما تريد التحقق من عدم وجود عنصر، مثل expect(screen.queryByText(/خطأ/)).not.toBeInTheDocument(). استخدم findBy عندما تنتظر بيانات غير متزامنة من السيرفر أو تأثيراً مؤجلاً، حيث تقوم بالانتظار والمحاولة المتكررة حتى تنتهي مهلة timeout.

مثال بالكود

// 1. عنصر حاضر متزامن
const title = screen.getByRole('heading');

// 2. التحقق من عدم الظهور
expect(screen.queryByText('رسالة خطأ')).toBeNull();

// 3. انتظار ظهور عنصر بعد استدعاء API
const successMessage = await screen.findByText('تم الحفظ بنجاح', {}, { timeout: 3000 });

أخطاء شائعة

• استخدام getBy داخل expect(...).not.toBeInTheDocument()، مما يطلق استثناءً ويفشل الاختبار فوراً قبل وصوله لـ expect.

أسئلة متابعة

• ما هي فلسفة React Testing Library (RTL) وكيف تختلف عن اختبارات الـ Enzyme القديمة؟

المصادر

• Testing Library docs — About Queries