𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝘀

మీ కోడ్ పనిచేస్తుందో లేదో ఊహించడం ఆపండి. నమ్మకాన్ని పెంచుకోవడానికి టెస్టింగ్‌ను ఉపయోగించండి.

సెటప్ చేయడం చాలా కష్టమని భావించి చాలా మంది డెవలపర్లు టెస్టింగ్‌ను వదిలేస్తారు. వారు టెస్టింగ్‌ను ఒక సేఫ్టీ నెట్ లా కాకుండా, ఒక భారమైన పనిలా భావిస్తారు.

మీరు కంప్యూటర్ కోసం టెస్ట్‌లను రాయరు. మీ భవిష్యత్తు అవసరాల కోసం టెస్ట్‌లను రాస్తారు. రాత్రి 2 గంటలకు మీరు ఏదైనా ఫంక్షన్‌ను మార్చినప్పుడు, మీరు ఏదైనా తప్పు చేశారా లేదా అనేది టెస్ట్‌లు వెంటనే మీకు తెలియజేస్తాయి.

టెస్టింగ్‌ను ఒక పిరమిడ్‌లా ఊహించుకోండి:

• Unit Tests: ఒక ఫంక్షన్ లేదా కాంపోనెంట్‌ను టెస్ట్ చేస్తాయి. ఇవి వేగంగా మరియు ఎక్కువగా ఉంటాయి. • Integration Tests: వివిధ భాగాలు కలిసి ఎలా పనిచేస్తాయో టెస్ట్ చేస్తాయి. ఇవి మీకు అధిక నమ్మకాన్ని ఇస్తాయి. • E2E Tests: బ్రౌజర్‌లో పూర్తి యాప్‌ను టెస్ట్ చేస్తాయి. వీటిని లాగిన్ లేదా చెకౌట్ వంటి కీలకమైన ప్రక్రియల (critical paths) కోసం మాత్రమే ఉపయోగించండి.

React Testing Library యొక్క గోల్డెన్ రూల్: యూజర్ ఏమి చూస్తున్నారో దానిని టెస్ట్ చేయండి.

state variablesలను టెస్ట్ చేయకండి. CSS classesలను టెస్ట్ చేయకండి. అంతర్గత లాజిక్ (internal logic)ను టెస్ట్ చేయకండి. బటన్లు, టెక్స్ట్ మరియు ఇన్‌పుట్‌లను టెస్ట్ చేయండి. ఒక యూజర్‌కు అది కనిపించకపోతే, దానిని టెస్ట్ చేయకండి.

Arrange, Act, Assert ప్యాటర్న్‌ను అనుసరించండి:

  • Arrange: మీ కాంపోనెంట్‌ను రెండర్ చేయండి.
  • Act: ఒక బటన్‌ను క్లిక్ చేయండి లేదా ఒక ఫీల్డ్‌లో టైప్ చేయండి.
  • Assert: సరైన టెక్స్ట్ స్క్రీన్‌పై కనిపిస్తుందో లేదో తనిఖీ చేయండి.

API కాల్స్ వంటి async కోడ్ కోసం, waitFor ఉపయోగించండి. ఇది ఫలితాన్ని తనిఖీ చేసే ముందు డేటా లోడ్ అయ్యే వరకు మీ టెస్ట్ వేచి ఉండేలా చేస్తుంది.

మీ యాప్ ప్రొడక్షన్‌లో క్రాష్ అయితే, Error Boundaries ఉపయోగించండి. ఒకే ఒక పాడైన కాంపోనెంట్ వల్ల మీ మొత్తం పేజీ వైట్ స్క్రీన్‌గా మారకుండా ఇవి నిరోధిస్తాయి. ఇవి మీ యూజర్లకు ఒక సురక్షితమైన ప్రత్యామ్నాయాన్ని (graceful fallback) అందిస్తాయి.

త్వరిత డీబగ్గింగ్ చెక్‌లిస్ట్:

  • ఎర్రర్స్ కోసం బ్రౌజర్ కన్సోల్‌ను తనిఖీ చేయండి.
  • API రెస్పాన్స్‌లను చూడటానికి Network ట్యాబ్‌ను తనిఖీ చేయండి.
  • props మరియు stateలను పరిశీలించడానికి React DevTools ఉపయోగించండి.
  • మీరు stateను నేరుగా మారుస్తున్నారా (mutating) అని తనిఖీ చేయండి.
  • మీ useEffect dependency arraysలను సరిచూసుకోండి.

ముఖ్యమైన వాటిని టెస్ట్ చేయడంపై దృష్టి పెట్టండి. మీకు 100% కవరేజ్ అవసరం లేదు. ఒకవేళ ఫీచర్లు విఫలమైతే నష్టం కలిగించే వాటిని మాత్రమే కవర్ చేయండి.

Source: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334