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

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

فلسفة RTL تقوم على اختبار المكونات كما يتفاعل معها المستخدم الحقيقي (عبر النصوص والأزرار ودورات الوصول)، بدلاً من اختبار تفاصيل التنفيذ الداخلي (Internal Implementation Details) كالـ State والـ Class Methods.

الشرح

كانت مكتبات مثل Enzyme تفحص حالة المكون الداخلية (مثل wrapper.state().count) والمكونات الفرعية المعزولة (Shallow Rendering). هذا النوع من الاختبارات سريع الكسر عند أي إعادة هيكلة (Refactor) حتى لو ظلت الواجهة تعمل كما هي للمستخدم. تركز RTL على الاستعلام بواسطة الأدوار والنصوص الظاهرة (getByRole, getByText) لضمان متانة الاختبار وثقته العالية.

مثال بالكود

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

test('يزيد العداد عند النقر على الزر', async () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /زيادة/i });
  await userEvent.click(button);
  expect(screen.getByText(/العدد: 1/i)).toBeInTheDocument();
});

أخطاء شائعة

• محاولة استخراج واستدعاء دوال الحالة الداخلية أو فحص الـ props بدلاً من اختبار ما يظهر للمستخدم في الـ DOM.

أسئلة متابعة

• كيف تختبر Custom Hook بشكل منفصل باستخدام renderHook من RTL؟
• ما الفرق بين getBy و queryBy و findBy في استعلامات React Testing Library؟

المصادر

• Testing Library docs — React Testing Library: Introduction