React ആപ്പുകൾ ടെസ്റ്റ് ചെയ്യലും ഡിബഗ് ചെയ്യലും

നിങ്ങളുടെ കോഡ് പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന് ഊഹിച്ചു നടക്കുന്നത് നിർത്തുക. ആത്മവിശ്വാസത്തോടെ കോഡ് ചെയ്യാൻ ടെസ്റ്റിംഗ് ഉപയോഗിക്കുക.

സെറ്റപ്പ് ചെയ്യുന്നത് വളരെ പ്രയാസമാണെന്ന് തോന്നുന്നതുകൊണ്ട് മിക്ക ഡെവലപ്പർമാരും ടെസ്റ്റിംഗ് ഒഴിവാക്കാറുണ്ട്. അവർ ടെസ്റ്റിംഗിനെ ഒരു സുരക്ഷാ കവചമായി കാണുന്നതിന് പകരം ഒരു അധിക ജോലി എന്ന രീതിയിലാണ് കാണുന്നത്.

നിങ്ങൾ ടെസ്റ്റുകൾ എഴുതുന്നത് ഒരു കമ്പ്യൂട്ടറിന് വേണ്ടിയല്ല. മറിച്ച് നിങ്ങളുടെ ഭാവിയിലെ ആവശ്യങ്ങൾക്കായാണ്. പുലർച്ചെ 2 മണിക്ക് നിങ്ങൾ ഒരു ഫംഗ്ഷനിൽ മാറ്റം വരുത്തുമ്പോൾ, എന്തെങ്കിലും തെറ്റ് സംഭവിച്ചിട്ടുണ്ടെങ്കിൽ ടെസ്റ്റുകൾ ഉടൻ തന്നെ നിങ്ങളെ അറിയിക്കും.

ടെസ്റ്റിംഗിനെ ഒരു പിരമിഡ് പോലെ കരുതുക:

• Unit Tests: ഒരു ഫംഗ്ഷനോ കമ്പോണന്റോ ടെസ്റ്റ് ചെയ്യുന്നു. ഇവ വേഗതയുള്ളതും എണ്ണത്തിൽ കൂടുതലുമുള്ളവയാണ്. • Integration Tests: വിവിധ ഭാഗങ്ങൾ എങ്ങനെ ഒന്നിച്ച് പ്രവർത്തിക്കുന്നു എന്ന് പരിശോധിക്കുന്നു. ഇവ നിങ്ങൾക്ക് ഉയർന്ന ആത്മവിശ്വാസം നൽകുന്നു. • E2E Tests: ഒരു ബ്രൗസറിൽ മുഴുവൻ ആപ്പും ടെസ്റ്റ് ചെയ്യുന്നു. ലോഗിൻ അല്ലെങ്കിൽ ചെക്ക്ഔട്ട് പോലുള്ള പ്രധാനപ്പെട്ട കാര്യങ്ങൾക്കായി മാത്രം ഇവ ഉപയോഗിക്കുക.

React Testing Library-യുടെ സുവർണ്ണ നിയമം: ഉപയോക്താവ് (user) കാണുന്നത് ടെസ്റ്റ് ചെയ്യുക.

State variables ടെസ്റ്റ് ചെയ്യരുത്. CSS classes ടെസ്റ്റ് ചെയ്യരുത്. ഇന്റേണൽ ലോജിക് (internal logic) ടെസ്റ്റ് ചെയ്യരുത്. ബട്ടണുകൾ, ടെക്സ്റ്റ്, ഇൻപുട്ടുകൾ എന്നിവ ടെസ്റ്റ് ചെയ്യുക. ഒരു ഉപയോക്താവിന് അത് കാണാൻ കഴിയില്ലെങ്കിൽ, അത് ടെസ്റ്റ് ചെയ്യേണ്ടതില്ല.

Arrange, Act, Assert എന്ന പാറ്റേൺ പിന്തുടരുക:

  • Arrange: നിങ്ങളുടെ കമ്പോണന്റ് റെൻഡർ ചെയ്യുക.
  • Act: ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുകയോ ഒരു ഫീൽഡിൽ ടൈപ്പ് ചെയ്യുകയോ ചെയ്യുക.
  • Assert: ശരിയായ ടെക്സ്റ്റ് സ്ക്രീനിൽ വരുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക.

API കോളുകൾ പോലുള്ള async കോഡുകൾക്കായി waitFor ഉപയോഗിക്കുക. ഇത് ഡാറ്റ ലോഡ് ആകുന്നത് വരെ കാത്തിരിക്കാനും അതിനുശേഷം ഫലം പരിശോധിക്കാനും നിങ്ങളുടെ ടെസ്റ്റിനെ അനുവദിക്കുന്നു.

പ്രൊഡക്ഷനിൽ നിങ്ങളുടെ ആപ്പ് ക്രാഷ് ചെയ്യുകയാണെങ്കിൽ Error Boundaries ഉപയോഗിക്കുക. ഒരു കമ്പോണന്റ് തകരാറിലായാൽ അത് മുഴുവൻ പേജിനെയും ഒരു വെള്ള സ്ക്രീനായി (white screen) മാറ്റുന്നത് ഇവ തടയുന്നു. ഉപയോക്താക്കൾക്ക് തടസ്സമില്ലാത്ത അനുഭവം നൽകാൻ ഇവ സഹായിക്കുന്നു.

വേഗത്തിലുള്ള ഡിബഗ്ഗിംഗ് ചെക്ക്‌ലിസ്റ്റ്:

  • എററുകൾക്കായി ബ്രൗസർ കൺസോൾ പരിശോധിക്കുക.
  • API റെസ്‌പോൺസുകൾ കാണാൻ Network ടാബ് പരിശോധിക്കുക.
  • props, state എന്നിവ പരിശോധിക്കാൻ React DevTools ഉപയോഗിക്കുക.
  • നിങ്ങൾ state നേരിട്ട് മാറ്റം വരുത്തുന്നുണ്ടോ (mutating) എന്ന് പരിശോധിക്കുക.
  • നിങ്ങളുടെ useEffect dependency arrays ശരിയാണോ എന്ന് പരിശോധിക്കുക.

പ്രധാനപ്പെട്ട കാര്യങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക. നിങ്ങൾക്ക് 100% കവറേജ് ആവശ്യമില്ല. പരാജയപ്പെട്ടാൽ വലിയ പ്രശ്നമുണ്ടാക്കുന്ന ഫീച്ചറുകൾ ടെസ്റ്റ് ചെയ്താൽ മതി.

സ്രോതസ്സ്: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334