React Apps کی ٹیسٹنگ اور ڈیبگنگ

یہ اندازہ لگانا چھوڑ دیں کہ آپ کا کوڈ کام کر رہا ہے یا نہیں۔ اعتماد پیدا کرنے کے لیے ٹیسٹنگ کا استعمال کریں۔

زیادہ تر ڈویلپرز ٹیسٹنگ سے گریز کرتے ہیں کیونکہ انہیں اس کا سیٹ اپ بہت مشکل لگتا ہے۔ وہ ٹیسٹنگ کو حفاظتی جال (safety net) کے بجائے ایک بوجھ سمجھتے ہیں۔

آپ کمپیوٹر کے لیے ٹیسٹ نہیں لکھتے۔ آپ اپنے مستقبل کے خود کے لیے ٹیسٹ لکھتے ہیں۔ جب آپ رات کے 2 بجے کسی فنکشن میں تبدیلی کرتے ہیں، تو ٹیسٹ آپ کو فوراً بتا دیتے ہیں کہ کہیں آپ نے کچھ خراب تو نہیں کر دیا۔

ٹیسٹنگ کو ایک اہرام (pyramid) کے طور پر سوچیں:

• Unit Tests: ایک فنکشن یا کمپوننٹ کا ٹیسٹ کریں۔ یہ تیز اور کثیر تعداد میں ہوتے ہیں۔ • Integration Tests: یہ دیکھیں کہ مختلف حصے مل کر کیسے کام کرتے ہیں۔ یہ آپ کو زیادہ اعتماد فراہم کرتے ہیں۔ • E2E Tests: براؤزر میں مکمل ایپ کا ٹیسٹ کریں۔ انہیں صرف اہم راستوں (critical paths) جیسے لاگ ان یا چیک آؤٹ کے لیے استعمال کریں۔

React Testing Library کا سنہری اصول: اس چیز کا ٹیسٹ کریں جو صارف دیکھتا ہے۔

State variables کا ٹیسٹ نہ کریں۔ CSS classes کا ٹیسٹ نہ کریں۔ اندرونی منطق (internal logic) کا ٹیسٹ نہ کریں۔ بٹنوں، متن (text) اور ان پٹس کا ٹیسٹ کریں۔ اگر صارف اسے نہیں دیکھ سکتا، تو اس کا ٹیسٹ نہ کریں۔

Arrange, Act, Assert پیٹرن پر عمل کریں:

  • Arrange: اپنے کمپوننٹ کو رینڈر (Render) کریں۔
  • Act: کسی بٹن پر کلک کریں یا کسی فیلڈ میں ٹائپ کریں۔
  • Assert: چیک کریں کہ کیا اسکرین پر درست متن ظاہر ہو رہا ہے۔

API calls جیسے async کوڈ کے لیے waitFor کا استعمال کریں۔ یہ آپ کے ٹیسٹ کو نتیجہ چیک کرنے سے پہلے ڈیٹا لوڈ ہونے کا انتظار کرنے کی اجازت دیتا ہے۔

اگر آپ کی ایپ پروڈکشن میں کریش ہو جائے، تو Error Boundaries کا استعمال کریں۔ یہ کسی ایک خراب کمپوننٹ کو آپ کے پورے پیج کو سفید اسکرین (white screen) میں بدلنے سے روکتے ہیں۔ یہ آپ کے صارفین کے لیے ایک بہتر متبادل (graceful fallback) فراہم کرتے ہیں۔

فوری ڈیبگنگ چیک لسٹ:

  • غلطیوں کے لیے براؤزر کنسول چیک کریں۔
  • API رسپانسز دیکھنے کے لیے Network ٹیب چیک کریں۔
  • Props اور state کا معائنہ کرنے کے لیے React DevTools کا استعمال کریں۔
  • چیک کریں کہ آیا آپ براہ راست state کو تبدیل (mutate) تو نہیں کر رہے۔
  • اپنے useEffect dependency arrays کی تصدیق کریں۔

صرف اہم چیزوں کی ٹیسٹنگ پر توجہ دیں۔ آپ کو 100% کوریج کی ضرورت نہیں ہے۔ آپ کو صرف ان فیچرز کو کور کرنے کی ضرورت ہے جن کے ناکام ہونے سے نقصان ہو سکتا ہے۔

ماخذ: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334