اختبار مكون رد فعل فعال أمر بالغ الأهمية. React Testing Library (RTL) تبسيط هذه العملية ، مع التأكيد على اختبار تفاعل المستخدم. تقدم هذه المقالة خمسة تقنيات RTL المتقدمة لكتابة اختبارات الوحدة الأكثر كفاءة وقابلة للصيانة.

---

1. إعطاء الأولوية الشاشة للاستعلامات

تجنب التدمير استفسارات مباشرة من render () . باستخدام كائن

فوائد:

محسّن اختبار القراءة.

• يظهر بشكل صريح التفاعل مع عناصر الشاشة المقدمة.

مثال:

بدلاً من:

const {getBytext} = render () ؛ توقع (getByText (/انقر فوق ME/I)).

const { getByText } = render();
expect(getByText(/click me/i)).toBeInTheDocument();

يجعل()؛ توقع (screen.getByText (/انقر فوق ME/I)).

يحافظ هذا النهج على الاتساق عبر أجنحة الاختبار الأكبر.

render();
expect(screen.getByText(/click me/i)).toBeInTheDocument();

findby

للعمليات غير المتزامنة

---

بالنسبة للمكونات التي تقدم عناصر غير متزامنة (على سبيل المثال ، بعد مكالمات API) ، استخدم استفسارات بدلاً من getby . هذا يضمن أن التأكيدات تعمل فقط بعد عرض العناصر.

فوائد: يلغي الاختبارات القاسية بسبب مشكلات التوقيت.

يخلق اختبارات أكثر قوة للمكونات غير المتزامنة.

مثال:
// مكون يجلب بشكل غير متزامن ويعرض اسم مستخدم عرض () ؛ const username = await screen.findbytext (/john doe/i) ؛ توقع (اسم المستخدم) .TobeIntheDocument () ؛

بدلاً من ذلك ، يمكن أن يحقق نتائج مماثلة ، لكن

تجنب استخدامها معًا.

// Component asynchronously fetches and displays a username
render();
const userName = await screen.findByText(/john doe/i);
expect(userName).toBeInTheDocument();

3. داخل للحصول على استهداف دقيق عند استهداف العناصر داخل حاويات محددة ، فإن الأداة المساعدة

ضمن

render();
await waitFor(() => {
  expect(screen.getByText(/john doe/i)).toBeInTheDocument();
});

فوائد:

---

يمنع اختيار العنصر غير المقصود. يحسن دقة الاختبار.

مثال:

يجعل(

المعلومات الشخصية

الاسم

) ؛ const namelabel = داخل (screen.getByRole ('Group')). getBylabelText (/name/i) ؛ توقع (namelabel) .TobeIntheDocument () ؛

• يؤدي هذا النهج المستهدف إلى أنظف وأكثر اختبارات ذات صلة بالسياق.

4.

userevent للتفاعلات الواقعية

render(
  

    
Personal Information
    Name
  
);

const nameLabel = within(screen.getByRole('group')).getByLabelText(/Name/i);
expect(nameLabel).toBeInTheDocument();

userevent

يوفر محاكاة تفاعل مستخدم أكثر واقعية ، بما في ذلك الكتابة والنقر والعلامات.

---

فوائد:

محاكاة حدث أكثر دقة.

يتعامل مع التفاعلات المعقدة مثل إدخال النص.

مثال:

استيراد userevent من '@testing-library/user-event' ؛ عرض () ؛ const emailInput = screen.getByLabelText (/email/i) ؛ const passwordinput = screen.getByLabelText (/password/i) ؛ const submitbutton = screen.getByRole ('button' ، {name: /submit /i}) ؛ Await userevent.type (البريد الإلكتروني ، '[email protected]') ؛ await userevent.type (passwordinput ، 'password123') ؛ AWAIT USEREVENT.CLICK (submitbutton) ؛ توقع (screen.getByText (/مرحبًا/i)). يضمن هذا النهج الاختبارات تعكس بدقة سلوك المستخدم الحقيقي.

5.
• debug ()
لفحص دوم

طريقة debug ()

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

import userEvent from '@testing-library/user-event';

render();
const emailInput = screen.getByLabelText(/email/i);
const passwordInput = screen.getByLabelText(/password/i);
const submitButton = screen.getByRole('button', { name: /submit/i });

await userEvent.type(emailInput, '[email protected]');
await userEvent.type(passwordInput, 'password123');
await userEvent.click(submitButton);

expect(screen.getByText(/welcome/i)).toBeInTheDocument();

---

يحدد بسرعة العناصر المفقودة أو فشل الاختبار.

يبسط التصحيح.

مثال:

render () ؛ screen.debug () ؛ // يسجل هيكل DOM

استهداف عناصر محددة ممكن أيضًا:

• قسم const = screen.getByrole ('المنطقة') ؛ داخل (القسم) .debug () ؛

نصائح إضافية:

render();
screen.debug(); // Logs the DOM structure

الجمع بين المطابقات:

const section = screen.getByRole('region');
within(section).debug();

.

---

تنظيف: بينما يقوم RTL بمضللة التنظيف ، يتصل بشكل صريح

تكامل Jest:
• فكر في استخدام Jest مع الإضافات لتنفيذ الاختبار المستهدف وتقارير التغطية المتكاملة IDE.
• خاتمة: RTL يعطي الأولوية للاختبار المتمحور حول المستخدم. من خلال تطبيق هذه التقنيات ، ستقوم بإنشاء اختبارات أنظف وأكثر موثوقية وقابلة للصيانة ، مما يؤدي إلى تحسين سير عمل التطوير الكلي. احتضن هذه الاستراتيجيات لتعزيز ممارسات اختبار الرد.