React Apps की टेस्टिंग और डिबगिंग

यह अंदाज़ा लगाना बंद करें कि आपका कोड काम कर रहा है या नहीं। आत्मविश्वास बढ़ाने के लिए टेस्टिंग का उपयोग करें।

अधिकांश डेवलपर्स टेस्टिंग को छोड़ देते हैं क्योंकि उन्हें इसका सेटअप बहुत कठिन लगता है। वे टेस्टिंग को सुरक्षा जाल (safety net) के बजाय एक बोझ की तरह मानते हैं।

आप कंप्यूटर के लिए टेस्ट नहीं लिखते हैं। आप अपने भविष्य के स्वयं के लिए टेस्ट लिखते हैं। जब आप रात के 2 बजे किसी फंक्शन में बदलाव करते हैं, तो टेस्ट आपको तुरंत बता देते हैं कि आपने कुछ तोड़ तो नहीं दिया।

टेस्टिंग को एक पिरामिड के रूप में सोचें:

• Unit Tests: एक फंक्शन या कंपोनेंट का टेस्ट करें। ये तेज़ और संख्या में अधिक होते हैं। • Integration Tests: यह टेस्ट करें कि विभिन्न हिस्से एक साथ कैसे काम करते हैं। ये आपको उच्च आत्मविश्वास देते हैं। • E2E Tests: ब्राउज़र में पूरे ऐप का टेस्ट करें। इनका उपयोग केवल लॉगिन या चेकआउट जैसे महत्वपूर्ण रास्तों (critical paths) के लिए ही करें।

React Testing Library का सुनहरा नियम: वह टेस्ट करें जो यूजर देखता है।

State variables का टेस्ट न करें। CSS classes का टेस्ट न करें। इंटरनल लॉजिक का टेस्ट न करें। बटन, टेक्स्ट और इनपुट का टेस्ट करें। यदि यूजर उसे देख नहीं सकता, तो उसका टेस्ट न करें।

Arrange, Act, Assert पैटर्न का पालन करें:

  • Arrange: अपने कंपोनेंट को रेंडर करें।
  • Act: किसी बटन पर क्लिक करें या किसी फील्ड में टाइप करें।
  • Assert: जांचें कि क्या स्क्रीन पर सही टेक्स्ट दिखाई दे रहा है।

API calls जैसे async कोड के लिए, waitFor का उपयोग करें। यह आपके टेस्ट को परिणाम की जांच करने से पहले डेटा लोड होने का इंतज़ार करने की अनुमति देता है।

यदि आपका ऐप प्रोडक्शन में क्रैश हो जाता है, तो Error Boundaries का उपयोग करें। वे एक खराब कंपोनेंट को आपके पूरे पेज को व्हाइट स्क्रीन में बदलने से रोकते हैं। वे आपके यूजर्स के लिए एक बेहतर विकल्प (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