كيف تختبر Custom Hook بشكل منفصل باستخدام renderHook من RTL؟

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

باستخدام renderHook(() => useCustomHook()) التي تنشئ مكوناً وهمياً لتشغيل الـ Hook وإرجاع كائن result يحمل قيمته الحالية ودالة rerender لتحديثه.

الشرح

نظراً لأن الـ Hooks لا يمكن استدعاؤها خارج مكونات ريأكت، توفر RTL دالة renderHook لتشغيل الـ Hook واختباره بمعزل عن واجهة المستخدم. يتم الوصول للقيم المرتجعة عبر result.current، وعند استدعاء أفعال تحدث الحالة يجب تغليفها أحياناً بـ act() إذا كانت دوال إجرائية مباشرة.

مثال بالكود

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('يزيد القيمة في Custom Hook', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

أخطاء شائعة

• تخزين result.current في متغير محلي منفصل ومحاولة قراءته لاحقاً، مما يفقد قراءة القيمة المحدثة بسبب تغير المرجع الداخلي.

أسئلة متابعة

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

المصادر

• Testing Library docs — renderHook