റിയാക്ട് കമ്പോണൻ്റ് ടെസ്റ്റിംഗ്: ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗിനുള്ള ഒരു സമഗ്ര ഗൈഡ്

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ ലോകത്ത്, കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നത് വളരെ പ്രധാനമാണ്. ഉപയോക്തൃ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു പ്രമുഖ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ റിയാക്ട്, ഡെവലപ്പർമാർക്ക് ഡൈനാമിക്, ഇൻ്ററാക്ടീവ് വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ അധികാരം നൽകുന്നു. എന്നിരുന്നാലും, റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ സങ്കീർണ്ണത കോഡിന്റെ ഗുണനിലവാരം ഉറപ്പാക്കുന്നതിനും പിശകുകൾ ഒഴിവാക്കുന്നതിനും ഒരു സമഗ്രമായ ടെസ്റ്റിംഗ് തന്ത്രം ആവശ്യപ്പെടുന്നു. ഈ ഗൈഡ് റിയാക്ട് ടെസ്റ്റിംഗിന്റെ ഒരു നിർണ്ണായക വശത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു: ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗ്.

എന്താണ് ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗ്?

ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗ് എന്നത് ഒരു സോഫ്റ്റ്‌വെയർ ടെസ്റ്റിംഗ് രീതിയാണ്, അതിൽ ഒരു ആപ്ലിക്കേഷൻ്റെ ഓരോ യൂണിറ്റുകളോ കമ്പോണൻ്റുകളോ സിസ്റ്റത്തിൻ്റെ മറ്റ് ഭാഗങ്ങളിൽ നിന്ന് ഒറ്റപ്പെടുത്തിക്കൊണ്ട് ടെസ്റ്റ് ചെയ്യുന്നു. റിയാക്ടിൻ്റെ പശ്ചാത്തലത്തിൽ, ചൈൽഡ് കമ്പോണൻ്റുകൾ, എക്സ്റ്റേണൽ എപിഐ-കൾ, അല്ലെങ്കിൽ റിഡക്സ് സ്റ്റോർ പോലുള്ള ഡിപൻഡൻസികളെ ആശ്രയിക്കാതെ ഓരോ റിയാക്ട് കമ്പോണൻ്റുകളെയും വ്യക്തിഗതമായി ടെസ്റ്റ് ചെയ്യുക എന്നതാണ് ഇതിനർത്ഥം. ഓരോ കമ്പോണൻ്റും ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടോയെന്നും ബാഹ്യ ഘടകങ്ങളുടെ സ്വാധീനമില്ലാതെ, നിർദ്ദിഷ്ട ഇൻപുട്ടുകൾ നൽകുമ്പോൾ പ്രതീക്ഷിക്കുന്ന ഔട്ട്പുട്ട് നൽകുന്നുണ്ടോയെന്നും പരിശോധിക്കുക എന്നതാണ് പ്രാഥമിക ലക്ഷ്യം.

എന്തുകൊണ്ടാണ് ഐസൊലേഷൻ പ്രധാനമാകുന്നത്?

ടെസ്റ്റിംഗ് സമയത്ത് കമ്പോണൻ്റുകളെ ഒറ്റപ്പെടുത്തുന്നത് നിരവധി പ്രധാന നേട്ടങ്ങൾ നൽകുന്നു:

• വേഗതയേറിയ ടെസ്റ്റ് എക്സിക്യൂഷൻ: ഐസൊലേറ്റഡ് ടെസ്റ്റുകൾ വളരെ വേഗത്തിൽ പ്രവർത്തിക്കുന്നു, കാരണം അവയിൽ സങ്കീർണ്ണമായ സജ്ജീകരണങ്ങളോ ബാഹ്യ ഡിപൻഡൻസികളുമായുള്ള ആശയവിനിമയങ്ങളോ ഉൾപ്പെടുന്നില്ല. ഇത് ഡെവലപ്‌മെൻ്റ് സൈക്കിളിന് വേഗത കൂട്ടുകയും കൂടുതൽ തവണ ടെസ്റ്റിംഗ് നടത്താൻ അനുവദിക്കുകയും ചെയ്യുന്നു.
• കൃത്യമായ പിശക് കണ്ടെത്തൽ: ഒരു ടെസ്റ്റ് പരാജയപ്പെടുമ്പോൾ, കാരണം പെട്ടെന്ന് വ്യക്തമാകും, കാരണം ടെസ്റ്റ് ഒരൊറ്റ കമ്പോണൻ്റിലും അതിൻ്റെ ആന്തരിക ലോജിക്കിലും ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഇത് ഡീബഗ്ഗിംഗ് ലളിതമാക്കുകയും പിശകുകൾ കണ്ടെത്തി പരിഹരിക്കാനാവശ്യമായ സമയം കുറയ്ക്കുകയും ചെയ്യുന്നു.
• ഡിപൻഡൻസികൾ കുറയ്ക്കുന്നു: ഐസൊലേറ്റഡ് ടെസ്റ്റുകൾക്ക് ആപ്ലിക്കേഷൻ്റെ മറ്റ് ഭാഗങ്ങളിലെ മാറ്റങ്ങൾ ബാധിക്കാനുള്ള സാധ്യത കുറവാണ്. ഇത് ടെസ്റ്റുകളെ കൂടുതൽ കരുത്തുറ്റതാക്കുകയും തെറ്റായ പോസിറ്റീവുകളുടെയോ നെഗറ്റീവുകളുടെയോ സാധ്യത കുറയ്ക്കുകയും ചെയ്യുന്നു.
• മെച്ചപ്പെട്ട കോഡ് ഡിസൈൻ: ഐസൊലേറ്റഡ് ടെസ്റ്റുകൾ എഴുതുന്നത് വ്യക്തമായ ഉത്തരവാദിത്തങ്ങളും കൃത്യമായി നിർവചിക്കപ്പെട്ട ഇൻ്റർഫേസുകളും ഉപയോഗിച്ച് കമ്പോണൻ്റുകൾ രൂപകൽപ്പന ചെയ്യാൻ ഡെവലപ്പർമാരെ പ്രോത്സാഹിപ്പിക്കുന്നു. ഇത് മോഡുലാരിറ്റി പ്രോത്സാഹിപ്പിക്കുകയും ആപ്ലിക്കേഷൻ്റെ മൊത്തത്തിലുള്ള ആർക്കിടെക്ചർ മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• മെച്ചപ്പെട്ട ടെസ്റ്റബിലിറ്റി: കമ്പോണൻ്റുകളെ ഒറ്റപ്പെടുത്തുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് ഡിപൻഡൻസികളെ എളുപ്പത്തിൽ മോക്ക് ചെയ്യാനോ സ്റ്റബ് ചെയ്യാനോ കഴിയും, ഇത് യഥാർത്ഥ സാഹചര്യങ്ങളിൽ പുനർനിർമ്മിക്കാൻ പ്രയാസമുള്ള വിവിധ സാഹചര്യങ്ങളും എഡ്ജ് കേസുകളും അനുകരിക്കാൻ അവരെ അനുവദിക്കുന്നു.

റിയാക്ട് യൂണിറ്റ് ടെസ്റ്റിംഗിനുള്ള ടൂളുകളും ലൈബ്രറികളും

റിയാക്ട് യൂണിറ്റ് ടെസ്റ്റിംഗിന് സൗകര്യമൊരുക്കുന്നതിന് ശക്തമായ നിരവധി ടൂളുകളും ലൈബ്രറികളും ലഭ്യമാണ്. ഏറ്റവും പ്രചാരമുള്ളവയിൽ ചിലത് താഴെ നൽകുന്നു:

• ജെസ്റ്റ് (Jest): ഫേസ്ബുക്ക് (ഇപ്പോൾ മെറ്റ) വികസിപ്പിച്ചെടുത്ത ഒരു ജാവാസ്ക്രിപ്റ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക് ആണ് ജെസ്റ്റ്, ഇത് പ്രത്യേകമായി റിയാക്ട് ആപ്ലിക്കേഷനുകൾ ടെസ്റ്റ് ചെയ്യാൻ രൂപകൽപ്പന ചെയ്തതാണ്. ഇത് മോക്കിംഗ്, അസേർഷൻ ലൈബ്രറികൾ, കോഡ് കവറേജ് വിശകലനം എന്നിവയുൾപ്പെടെയുള്ള സമഗ്രമായ ഫീച്ചറുകൾ നൽകുന്നു. ജെസ്റ്റ് അതിൻ്റെ എളുപ്പത്തിലുള്ള ഉപയോഗത്തിനും മികച്ച പ്രകടനത്തിനും പേരുകേട്ടതാണ്.
• റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി (React Testing Library): ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിൽ നിന്ന് കമ്പോണൻ്റുകൾ ടെസ്റ്റ് ചെയ്യാൻ പ്രോത്സാഹിപ്പിക്കുന്ന ഒരു ലളിതമായ ടെസ്റ്റിംഗ് ലൈബ്രറിയാണിത്. ഉപയോക്താവിൻ്റെ ഇടപെടലുകളെ അനുകരിക്കുന്ന രീതിയിൽ കമ്പോണൻ്റുകളെ ചോദ്യം ചെയ്യാനും അവയുമായി സംവദിക്കാനും ഇത് യൂട്ടിലിറ്റി ഫംഗ്ഷനുകൾ നൽകുന്നു. ഈ സമീപനം ഉപയോക്തൃ അനുഭവത്തോട് കൂടുതൽ അടുത്തുനിൽക്കുന്ന ടെസ്റ്റുകൾ എഴുതാൻ സഹായിക്കുന്നു.
• എൻസൈം (Enzyme): എയർബിഎൻബി വികസിപ്പിച്ച റിയാക്ടിനായുള്ള ഒരു ജാവാസ്ക്രിപ്റ്റ് ടെസ്റ്റിംഗ് യൂട്ടിലിറ്റിയാണ് എൻസൈം. റിയാക്ട് കമ്പോണൻ്റുകൾ റെൻഡർ ചെയ്യാനും അവയുടെ പ്രോപ്‌സ്, സ്റ്റേറ്റ്, ലൈഫ് സൈക്കിൾ മെത്തേഡുകൾ പോലുള്ള ആന്തരിക ഘടകങ്ങളുമായി സംവദിക്കാനും ഇത് ഫംഗ്ഷനുകൾ നൽകുന്നു. പല പ്രോജക്റ്റുകളിലും ഇപ്പോഴും ഉപയോഗിക്കുന്നുണ്ടെങ്കിലും, പുതിയ പ്രോജക്റ്റുകൾക്കായി റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറിയാണ് പൊതുവെ തിരഞ്ഞെടുക്കപ്പെടുന്നത്.
• മോക്ക (Mocha): വിവിധ അസേർഷൻ ലൈബ്രറികളുമായും മോക്കിംഗ് ഫ്രെയിംവർക്കുകളുമായും ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു ഫ്ലെക്സിബിൾ ജാവാസ്ക്രിപ്റ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക് ആണ് മോക്ക. ഇത് വൃത്തിയുള്ളതും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ ഒരു ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് നൽകുന്നു.
• ചായ് (Chai): മോക്ക അല്ലെങ്കിൽ മറ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകളുമായി ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു ജനപ്രിയ അസേർഷൻ ലൈബ്രറിയാണ് ചായ്. ഇത് എക്സ്പെക്റ്റ്, ഷുഡ്, അസേർട്ട് തുടങ്ങിയ വിവിധ അസേർഷൻ ശൈലികൾ നൽകുന്നു.
• സിനോൺ.ജെഎസ് (Sinon.JS): ജാവാസ്ക്രിപ്റ്റിനായുള്ള ഒരു സ്റ്റാൻഡലോൺ ടെസ്റ്റ് സ്പൈസ്, സ്റ്റബ്സ്, മോക്ക്സ് എന്നിവയാണ് സിനോൺ.ജെഎസ്. ഇത് ഏത് യൂണിറ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കിനൊപ്പവും പ്രവർത്തിക്കും.

മിക്ക ആധുനിക റിയാക്ട് പ്രോജക്റ്റുകൾക്കും, ശുപാർശ ചെയ്യുന്ന സംയോജനം ജെസ്റ്റ്, റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി എന്നിവയാണ്. ഈ സംയോജനം റിയാക്ട് ടെസ്റ്റിംഗിനുള്ള മികച്ച രീതികളുമായി നന്നായി യോജിക്കുന്ന ശക്തവും ലളിതവുമായ ഒരു ടെസ്റ്റിംഗ് അനുഭവം നൽകുന്നു.

നിങ്ങളുടെ ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് സജ്ജീകരിക്കുന്നു

നിങ്ങൾ യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതാൻ തുടങ്ങുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് സജ്ജീകരിക്കേണ്ടതുണ്ട്. ജെസ്റ്റും റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറിയും സജ്ജീകരിക്കുന്നതിനുള്ള ഒരു ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ് ഇതാ:

1. ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുക:

               npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-env @babel/preset-react
               
   
                 
                   Copy
                 
               
             

   • jest: ജെസ്റ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.
   • @testing-library/react: കമ്പോണൻ്റുകളുമായി സംവദിക്കുന്നതിനുള്ള റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി.
   • @testing-library/jest-dom: ഡോമുമായി (DOM) പ്രവർത്തിക്കുന്നതിന് കസ്റ്റം ജെസ്റ്റ് മാച്ചറുകൾ നൽകുന്നു.
   • babel-jest: ജെസ്റ്റിനായി ജാവാസ്ക്രിപ്റ്റ് കോഡ് പരിവർത്തനം ചെയ്യുന്നു.
   • @babel/preset-env: നിങ്ങളുടെ ടാർഗെറ്റ് എൻവയോൺമെൻ്റിന് ആവശ്യമായ സിൻ്റാക്സ് ട്രാൻസ്ഫോമുകൾ (ഓപ്ഷണലായി, ബ്രൗസർ പോളിഫില്ലുകൾ) മാനേജ് ചെയ്യാതെ തന്നെ ഏറ്റവും പുതിയ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാൻ അനുവദിക്കുന്ന ഒരു സ്മാർട്ട് പ്രീസെറ്റ്.
   • @babel/preset-react: എല്ലാ റിയാക്ട് പ്ലഗിനുകൾക്കുമുള്ള ബേബൽ പ്രീസെറ്റ്.
2. ബേബൽ കോൺഫിഗർ ചെയ്യുക (babel.config.js):

               module.exports = {
     presets: [
       ['@babel/preset-env', {targets: {node: 'current'}}],
       '@babel/preset-react',
     ],
   };
   
               
   
                 
                   Copy
                 
               
             

3. ജെസ്റ്റ് കോൺഫിഗർ ചെയ്യുക (jest.config.js):

               module.exports = {
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
     moduleNameMapper: {
       '\\.(css|less|scss)$': 'identity-obj-proxy',
     },
   };
   
               
   
                 
                   Copy
                 
               
             

   • testEnvironment: 'jsdom': ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് ബ്രൗസർ പോലുള്ള എൻവയോൺമെൻ്റ് ആയി വ്യക്തമാക്കുന്നു.
   • setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']: ടെസ്റ്റ് എൻവയോൺമെൻ്റ് സജ്ജീകരിച്ചതിന് ശേഷം പ്രവർത്തിപ്പിക്കേണ്ട ഒരു ഫയൽ വ്യക്തമാക്കുന്നു. ഇത് സാധാരണയായി ജെസ്റ്റ് കോൺഫിഗർ ചെയ്യാനും കസ്റ്റം മാച്ചറുകൾ ചേർക്കാനും ഉപയോഗിക്കുന്നു.
   • moduleNameMapper: CSS/SCSS ഇമ്പോർട്ടുകളെ മോക്ക് ചെയ്തുകൊണ്ട് കൈകാര്യം ചെയ്യുന്നു. നിങ്ങളുടെ കമ്പോണൻ്റുകളിൽ സ്റ്റൈൽഷീറ്റുകൾ ഇമ്പോർട്ട് ചെയ്യുമ്പോൾ ഉണ്ടാകുന്ന പ്രശ്നങ്ങൾ ഇത് തടയുന്നു. `identity-obj-proxy` ഓരോ കീയും സ്റ്റൈലിൽ ഉപയോഗിക്കുന്ന ക്ലാസ് നാമവുമായി പൊരുത്തപ്പെടുന്ന ഒരു ഒബ്ജക്റ്റ് ഉണ്ടാക്കുന്നു, അതിൻ്റെ മൂല്യം ക്ലാസ് നാമം തന്നെയായിരിക്കും.
4. setupTests.js ഉണ്ടാക്കുക (src/setupTests.js):

               import '@testing-library/jest-dom/extend-expect';
               
   
                 
                   Copy
                 
               
             

   ഈ ഫയൽ `@testing-library/jest-dom`-ൽ നിന്നുള്ള `toBeInTheDocument` പോലുള്ള കസ്റ്റം മാച്ചറുകൾ ഉപയോഗിച്ച് ജെസ്റ്റിനെ വികസിപ്പിക്കുന്നു.

5. package.json അപ്ഡേറ്റ് ചെയ്യുക:

               "scripts": {
     "test": "jest",
     "test:watch": "jest --watchAll"
   }
               
   
                 
                   Copy
                 
               
             

   ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കാനും മാറ്റങ്ങൾ നിരീക്ഷിക്കാനും നിങ്ങളുടെ `package.json`-ലേക്ക് ടെസ്റ്റ് സ്ക്രിപ്റ്റുകൾ ചേർക്കുക.

നിങ്ങളുടെ ആദ്യത്തെ ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റ് എഴുതുന്നു

നമുക്ക് ഒരു ലളിതമായ റിയാക്ട് കമ്പോണൻ്റ് ഉണ്ടാക്കി അതിനായി ഒരു ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റ് എഴുതാം.

ഉദാഹരണ കമ്പോണൻ്റ് (src/components/Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name || 'World'}!</h1>;
}

export default Greeting;
            

              
                Copy
              
            
          

ടെസ്റ്റ് ഫയൽ (src/components/Greeting.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders the greeting with the provided name', () => {
    render(<Greeting name="John" />);
    const greetingElement = screen.getByText('Hello, John!');
    expect(greetingElement).toBeInTheDocument();
  });

  it('renders the greeting with the default name when no name is provided', () => {
    render(<Greeting />);
    const greetingElement = screen.getByText('Hello, World!');
    expect(greetingElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

വിശദീകരണം:

• `describe` ബ്ലോക്ക്: ബന്ധപ്പെട്ട ടെസ്റ്റുകളെ ഒരുമിച്ച് ഗ്രൂപ്പ് ചെയ്യുന്നു.
• `it` ബ്ലോക്ക്: ഒരു പ്രത്യേക ടെസ്റ്റ് കേസ് നിർവചിക്കുന്നു.
• `render` ഫംഗ്ഷൻ: കമ്പോണൻ്റിനെ ഡോമിലേക്ക് റെൻഡർ ചെയ്യുന്നു.
• `screen.getByText` ഫംഗ്ഷൻ: നിർദ്ദിഷ്ട ടെക്സ്റ്റ് ഉള്ള ഒരു എലമെൻ്റിനായി ഡോമിൽ തിരയുന്നു.
• `expect` ഫംഗ്ഷൻ: കമ്പോണൻ്റിൻ്റെ ഔട്ട്പുട്ടിനെക്കുറിച്ച് ഒരു അസേർഷൻ നടത്തുന്നു.
• `toBeInTheDocument` മാച്ചർ: എലമെൻ്റ് ഡോമിൽ ഉണ്ടോ എന്ന് പരിശോധിക്കുന്നു.

ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതിന്, നിങ്ങളുടെ ടെർമിനലിൽ താഴെ പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

            npm test
            

              
                Copy
              
            
          

ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യുന്നു

ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗിൽ, ബാഹ്യ ഘടകങ്ങൾ ടെസ്റ്റ് ഫലങ്ങളെ സ്വാധീനിക്കുന്നത് തടയാൻ ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. മോക്കിംഗ് എന്നാൽ യഥാർത്ഥ ഡിപൻഡൻസികളെ ലളിതമായ പതിപ്പുകൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക എന്നതാണ്, ഇവയെ ടെസ്റ്റിംഗ് സമയത്ത് നിയന്ത്രിക്കാനും കൈകാര്യം ചെയ്യാനും കഴിയും.

ഉദാഹരണം: ഒരു ഫംഗ്ഷൻ മോക്ക് ചെയ്യുന്നു

ഒരു എപിഐ-യിൽ നിന്ന് ഡാറ്റ എടുക്കുന്ന ഒരു കമ്പോണൻ്റ് നമുക്കുണ്ടെന്ന് കരുതുക:

കമ്പോണൻ്റ് (src/components/DataFetcher.js):

            import React, { useState, useEffect } from 'react';

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const fetchedData = await fetchData();
      setData(fetchedData);
    }

    loadData();
  }, []);

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
}

export default DataFetcher;
            

              
                Copy
              
            
          

ടെസ്റ്റ് ഫയൽ (src/components/DataFetcher.test.js):

            import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import DataFetcher from './DataFetcher';

// Mock the fetchData function
const mockFetchData = jest.fn();

// Mock the module that contains the fetchData function
jest.mock('./DataFetcher', () => ({
  __esModule: true,
  default: function MockedDataFetcher() {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      async function loadData() {
        const fetchedData = await mockFetchData();
        setData(fetchedData);
      }
      loadData();
    }, []);

    if (!data) {
      return <p>Loading...</p>;
    }

    return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
  },
}));

describe('DataFetcher Component', () => {
  it('renders the data fetched from the API', async () => {
    // Set the mock implementation
    mockFetchData.mockResolvedValue({ name: 'Test Data' });

    render(<DataFetcher />);

    // Wait for the data to load
    await waitFor(() => screen.getByText('Data:'));

    // Assert that the data is rendered correctly
    expect(screen.getByText('{"name":"Test Data"}')).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

വിശദീകരണം:

• `jest.mock('./DataFetcher', ...)`: `DataFetcher` കമ്പോണൻ്റിനെ പൂർണ്ണമായും മോക്ക് ചെയ്യുന്നു, അതിൻ്റെ യഥാർത്ഥ പ്രവർത്തനത്തെ ഒരു മോക്ക് ചെയ്ത പതിപ്പ് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു. ഈ സമീപനം, കമ്പോണൻ്റിനുള്ളിൽ നിർവചിച്ചിട്ടുള്ള `fetchData` ഫംഗ്ഷൻ ഉൾപ്പെടെയുള്ള ഏതെങ്കിലും ബാഹ്യ ഡിപൻഡൻസികളിൽ നിന്ന് ടെസ്റ്റിനെ ഫലപ്രദമായി ഒറ്റപ്പെടുത്തുന്നു.
• `mockFetchData.mockResolvedValue({ name: 'Test Data' })` `fetchData`-യ്ക്കായി ഒരു മോക്ക് റിട്ടേൺ മൂല്യം സജ്ജമാക്കുന്നു. ഇത് മോക്ക് ചെയ്ത ഫംഗ്ഷൻ നൽകുന്ന ഡാറ്റയെ നിയന്ത്രിക്കാനും വിവിധ സാഹചര്യങ്ങളെ അനുകരിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.
• `await waitFor(() => screen.getByText('Data:'))` "Data:" എന്ന ടെക്സ്റ്റ് ദൃശ്യമാകുന്നതുവരെ കാത്തിരിക്കുന്നു, ഇത് അസേർഷനുകൾ നടത്തുന്നതിന് മുമ്പ് മോക്ക് ചെയ്ത എപിഐ കോൾ പൂർത്തിയായി എന്ന് ഉറപ്പാക്കുന്നു.

മൊഡ്യൂളുകൾ മോക്ക് ചെയ്യുന്നു

ജെസ്റ്റ് മുഴുവൻ മൊഡ്യൂളുകളും മോക്ക് ചെയ്യുന്നതിന് ശക്തമായ സംവിധാനങ്ങൾ നൽകുന്നു. ഒരു കമ്പോണൻ്റ് ബാഹ്യ ലൈബ്രറികളെയോ യൂട്ടിലിറ്റി ഫംഗ്ഷനുകളെയോ ആശ്രയിക്കുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: ഒരു ഡേറ്റ് യൂട്ടിലിറ്റി മോക്ക് ചെയ്യുന്നു

ഒരു യൂട്ടിലിറ്റി ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഫോർമാറ്റ് ചെയ്ത തീയതി പ്രദർശിപ്പിക്കുന്ന ഒരു കമ്പോണൻ്റ് നിങ്ങൾക്കുണ്ടെന്ന് കരുതുക:

കമ്പോണൻ്റ് (src/components/DateDisplay.js):

            import React from 'react';
import { formatDate } from '../utils/dateUtils';

function DateDisplay({ date }) {
  const formattedDate = formatDate(date);
  return <p>The date is: {formattedDate}</p>;
}

export default DateDisplay;
            

              
                Copy
              
            
          

യൂട്ടിലിറ്റി ഫംഗ്ഷൻ (src/utils/dateUtils.js):

            export function formatDate(date) {
  return date.toLocaleDateString('en-US');
}
            

              
                Copy
              
            
          

ടെസ്റ്റ് ഫയൽ (src/components/DateDisplay.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import DateDisplay from './DateDisplay';
import * as dateUtils from '../utils/dateUtils';

describe('DateDisplay Component', () => {
  it('renders the formatted date', () => {
    // Mock the formatDate function
    const mockFormatDate = jest.spyOn(dateUtils, 'formatDate');
    mockFormatDate.mockReturnValue('2024-01-01');

    render(<DateDisplay date={new Date('2024-01-01T00:00:00.000Z')} />);

    const dateElement = screen.getByText('The date is: 2024-01-01');
    expect(dateElement).toBeInTheDocument();

    // Restore the original function
    mockFormatDate.mockRestore();
  });
});
            

              
                Copy
              
            
          

വിശദീകരണം:

• `import * as dateUtils from '../utils/dateUtils'` `dateUtils` മൊഡ്യൂളിൽ നിന്നുള്ള എല്ലാ എക്സ്പോർട്ടുകളും ഇമ്പോർട്ട് ചെയ്യുന്നു.
• `jest.spyOn(dateUtils, 'formatDate')` `dateUtils` മൊഡ്യൂളിനുള്ളിലെ `formatDate` ഫംഗ്ഷനിൽ ഒരു സ്പൈ ഉണ്ടാക്കുന്നു. ഇത് ഫംഗ്ഷനിലേക്കുള്ള കോളുകൾ ട്രാക്ക് ചെയ്യാനും അതിൻ്റെ പ്രവർത്തനം മാറ്റിയെഴുതാനും നിങ്ങളെ അനുവദിക്കുന്നു.
• `mockFormatDate.mockReturnValue('2024-01-01')` `formatDate`-നായി ഒരു മോക്ക് റിട്ടേൺ മൂല്യം സജ്ജമാക്കുന്നു.
• `mockFormatDate.mockRestore()` ടെസ്റ്റ് പൂർത്തിയായ ശേഷം ഫംഗ്ഷൻ്റെ യഥാർത്ഥ പ്രവർത്തനം പുനഃസ്ഥാപിക്കുന്നു. ഇത് മോക്ക് മറ്റ് ടെസ്റ്റുകളെ ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.

ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗിനുള്ള മികച്ച രീതികൾ

ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗിൻ്റെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാൻ, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

• ആദ്യം ടെസ്റ്റുകൾ എഴുതുക (TDD): യഥാർത്ഥ കമ്പോണൻ്റ് കോഡ് എഴുതുന്നതിന് മുമ്പ് ടെസ്റ്റുകൾ എഴുതുന്ന ടെസ്റ്റ്-ഡ്രിവൺ ഡെവലപ്‌മെൻ്റ് (TDD) പരിശീലിക്കുക. ഇത് ആവശ്യകതകൾ വ്യക്തമാക്കാൻ സഹായിക്കുകയും കമ്പോണൻ്റ് ടെസ്റ്റബിലിറ്റി മനസ്സിൽ വെച്ച് രൂപകൽപ്പന ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.
• കമ്പോണൻ്റ് ലോജിക്കിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക: കമ്പോണൻ്റിൻ്റെ റെൻഡറിംഗ് വിശദാംശങ്ങളേക്കാൾ അതിൻ്റെ ആന്തരിക ലോജിക്കും പെരുമാറ്റവും ടെസ്റ്റ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.
• അർത്ഥവത്തായ ടെസ്റ്റ് പേരുകൾ ഉപയോഗിക്കുക: ടെസ്റ്റിൻ്റെ ഉദ്ദേശ്യം കൃത്യമായി പ്രതിഫലിപ്പിക്കുന്ന വ്യക്തവും വിവരണാത്മകവുമായ ടെസ്റ്റ് പേരുകൾ ഉപയോഗിക്കുക.
• ടെസ്റ്റുകൾ സംക്ഷിപ്തവും കേന്ദ്രീകൃതവുമായി സൂക്ഷിക്കുക: ഓരോ ടെസ്റ്റും കമ്പോണൻ്റിൻ്റെ പ്രവർത്തനത്തിൻ്റെ ഒരൊറ്റ വശത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കണം.
• അമിതമായി മോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കുക: കമ്പോണൻ്റിനെ ഒറ്റപ്പെടുത്താൻ ആവശ്യമായ ഡിപൻഡൻസികൾ മാത്രം മോക്ക് ചെയ്യുക. അമിതമായി മോക്ക് ചെയ്യുന്നത് യഥാർത്ഥ സാഹചര്യങ്ങളിൽ കമ്പോണൻ്റിൻ്റെ പെരുമാറ്റത്തെ കൃത്യമായി പ്രതിഫലിപ്പിക്കാത്തതും എളുപ്പത്തിൽ പരാജയപ്പെടുന്നതുമായ ടെസ്റ്റുകളിലേക്ക് നയിച്ചേക്കാം.
• എഡ്ജ് കേസുകൾ ടെസ്റ്റ് ചെയ്യുക: അപ്രതീക്ഷിതമായ ഇൻപുട്ടുകൾ കമ്പോണൻ്റ് ശരിയായി കൈകാര്യം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ എഡ്ജ് കേസുകളും ബൗണ്ടറി കണ്ടീഷനുകളും ടെസ്റ്റ് ചെയ്യാൻ മറക്കരുത്.
• ടെസ്റ്റ് കവറേജ് നിലനിർത്തുക: കമ്പോണൻ്റിൻ്റെ എല്ലാ ഭാഗങ്ങളും വേണ്ടത്ര ടെസ്റ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ ഉയർന്ന ടെസ്റ്റ് കവറേജ് ലക്ഷ്യമിടുക.
• ടെസ്റ്റുകൾ അവലോകനം ചെയ്യുകയും റീഫാക്ടർ ചെയ്യുകയും ചെയ്യുക: നിങ്ങളുടെ ടെസ്റ്റുകൾ പ്രസക്തവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായി തുടരുന്നുവെന്ന് ഉറപ്പാക്കാൻ അവ പതിവായി അവലോകനം ചെയ്യുകയും റീഫാക്ടർ ചെയ്യുകയും ചെയ്യുക.

ഇൻ്റർനാഷണലൈസേഷൻ (i18n), യൂണിറ്റ് ടെസ്റ്റിംഗ്

ഒരു ആഗോള പ്രേക്ഷകർക്കായി ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ, ഇൻ്റർനാഷണലൈസേഷൻ (i18n) നിർണായകമാണ്. i18n ശരിയായി നടപ്പിലാക്കിയിട്ടുണ്ടെന്നും ആപ്ലിക്കേഷൻ വ്യത്യസ്ത ലൊക്കേലുകൾക്ക് അനുയോജ്യമായ ഭാഷയിലും ഫോർമാറ്റിലും ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നുവെന്നും ഉറപ്പാക്കുന്നതിൽ യൂണിറ്റ് ടെസ്റ്റിംഗ് ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു.

ലൊക്കേൽ-നിർദ്ദിഷ്ട ഉള്ളടക്കം ടെസ്റ്റ് ചെയ്യുന്നു

ലൊക്കേൽ-നിർദ്ദിഷ്ട ഉള്ളടക്കം (ഉദാ. തീയതികൾ, അക്കങ്ങൾ, കറൻസികൾ, ടെക്സ്റ്റ്) പ്രദർശിപ്പിക്കുന്ന കമ്പോണൻ്റുകൾ ടെസ്റ്റ് ചെയ്യുമ്പോൾ, വ്യത്യസ്ത ലൊക്കേലുകൾക്കായി ഉള്ളടക്കം ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടതുണ്ട്. ഇതിനായി സാധാരണയായി i18n ലൈബ്രറി മോക്ക് ചെയ്യുകയോ അല്ലെങ്കിൽ ടെസ്റ്റിംഗ് സമയത്ത് ലൊക്കേൽ-നിർദ്ദിഷ്ട ഡാറ്റ നൽകുകയോ ചെയ്യേണ്ടി വരും.

ഉദാഹരണം: i18n ഉപയോഗിച്ച് ഒരു ഡേറ്റ് കമ്പോണൻ്റ് ടെസ്റ്റ് ചെയ്യുന്നു

`react-intl` പോലുള്ള ഒരു i18n ലൈബ്രറി ഉപയോഗിച്ച് തീയതി പ്രദർശിപ്പിക്കുന്ന ഒരു കമ്പോണൻ്റ് നിങ്ങൾക്കുണ്ടെന്ന് കരുതുക:

കമ്പോണൻ്റ് (src/components/LocalizedDate.js):

            import React from 'react';
import { FormattedDate } from 'react-intl';

function LocalizedDate({ date }) {
  return <p>The date is: <FormattedDate value={date} /></p>;
}

export default LocalizedDate;
            

              
                Copy
              
            
          

ടെസ്റ്റ് ഫയൽ (src/components/LocalizedDate.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import LocalizedDate from './LocalizedDate';

describe('LocalizedDate Component', () => {
  it('renders the date in the specified locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="fr" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 01/01/2024'); // French format
    expect(dateElement).toBeInTheDocument();
  });

 it('renders the date in the default locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="en" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 1/1/2024'); // English format
    expect(dateElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

വിശദീകരണം:

• `<IntlProvider locale="fr" messages={{}}>` കമ്പോണൻ്റിനെ ഒരു `IntlProvider`-ൽ പൊതിയുന്നു, ഇത് ആവശ്യമുള്ള ലൊക്കേലും ശൂന്യമായ ഒരു മെസ്സേജ് ഒബ്ജക്റ്റും നൽകുന്നു.
• `screen.getByText('The date is: 01/01/2024')` തീയതി ഫ്രഞ്ച് ഫോർമാറ്റിൽ (ദിവസം/മാസം/വർഷം) റെൻഡർ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

`IntlProvider` ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് വ്യത്യസ്ത ലൊക്കേലുകൾ അനുകരിക്കാനും നിങ്ങളുടെ കമ്പോണൻ്റുകൾ ഒരു ആഗോള പ്രേക്ഷകർക്ക് വേണ്ടി ഉള്ളടക്കം ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടോയെന്ന് പരിശോധിക്കാനും കഴിയും.

വിപുലമായ ടെസ്റ്റിംഗ് ടെക്നിക്കുകൾ

അടിസ്ഥാനങ്ങൾക്കപ്പുറം, നിങ്ങളുടെ റിയാക്ട് യൂണിറ്റ് ടെസ്റ്റിംഗ് തന്ത്രം കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയുന്ന നിരവധി വിപുലമായ ടെക്നിക്കുകൾ ഉണ്ട്:

• സ്നാപ്പ്ഷോട്ട് ടെസ്റ്റിംഗ്: ഒരു കമ്പോണൻ്റിൻ്റെ റെൻഡർ ചെയ്ത ഔട്ട്പുട്ടിൻ്റെ ഒരു സ്നാപ്പ്ഷോട്ട് എടുത്ത് മുമ്പ് സംഭരിച്ച സ്നാപ്പ്ഷോട്ടുമായി താരതമ്യം ചെയ്യുന്നതാണ് സ്നാപ്പ്ഷോട്ട് ടെസ്റ്റിംഗ്. കമ്പോണൻ്റിൻ്റെ യുഐ-യിലെ അപ്രതീക്ഷിത മാറ്റങ്ങൾ കണ്ടെത്താൻ ഇത് സഹായിക്കുന്നു. ഉപയോഗപ്രദമാണെങ്കിലും, സ്നാപ്പ്ഷോട്ട് ടെസ്റ്റുകൾ വിവേകത്തോടെ ഉപയോഗിക്കണം, കാരണം അവ എളുപ്പത്തിൽ പരാജയപ്പെടാനും യുഐ മാറുമ്പോൾ ഇടയ്ക്കിടെ അപ്ഡേറ്റ് ചെയ്യേണ്ടിയും വരും.
• പ്രോപ്പർട്ടി-ബേസ്ഡ് ടെസ്റ്റിംഗ്: ഇൻപുട്ട് മൂല്യങ്ങൾ എന്തുതന്നെയായാലും ഒരു കമ്പോണൻ്റിന് എല്ലായ്പ്പോഴും ശരിയായിരിക്കേണ്ട പ്രോപ്പർട്ടികൾ നിർവചിക്കുന്നത് പ്രോപ്പർട്ടി-ബേസ്ഡ് ടെസ്റ്റിംഗിൽ ഉൾപ്പെടുന്നു. ഒരൊറ്റ ടെസ്റ്റ് കേസ് ഉപയോഗിച്ച് വിപുലമായ ഇൻപുട്ടുകൾ ടെസ്റ്റ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ജാവാസ്ക്രിപ്റ്റിൽ പ്രോപ്പർട്ടി-ബേസ്ഡ് ടെസ്റ്റിംഗിനായി `jsverify` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കാം.
• ആക്സസിബിലിറ്റി ടെസ്റ്റിംഗ്: നിങ്ങളുടെ കമ്പോണൻ്റുകൾ വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് ആക്സസ് ചെയ്യാൻ കഴിയുന്നതാണെന്ന് ആക്സസിബിലിറ്റി ടെസ്റ്റിംഗ് ഉറപ്പാക്കുന്നു. ടെസ്റ്റിംഗ് സമയത്ത് നിങ്ങളുടെ കമ്പോണൻ്റുകളിലെ ആക്സസിബിലിറ്റി പ്രശ്നങ്ങൾ സ്വയമേവ കണ്ടെത്താൻ `react-axe` പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കാം.

ഉപസംഹാരം

റിയാക്ട് കമ്പോണൻ്റ് ടെസ്റ്റിംഗിന്റെ ഒരു അടിസ്ഥാന വശമാണ് ഐസൊലേറ്റഡ് യൂണിറ്റ് ടെസ്റ്റിംഗ്. കമ്പോണൻ്റുകളെ ഒറ്റപ്പെടുത്തുന്നതിലൂടെയും, ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യുന്നതിലൂടെയും, മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെയും, നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ ഗുണനിലവാരം ഉറപ്പാക്കുന്ന കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ടെസ്റ്റുകൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും. ടെസ്റ്റിംഗ് നേരത്തെ സ്വീകരിക്കുന്നതും വികസന പ്രക്രിയയിലുടനീളം അത് സമന്വയിപ്പിക്കുന്നതും കൂടുതൽ വിശ്വസനീയമായ സോഫ്റ്റ്‌വെയറിലേക്കും കൂടുതൽ ആത്മവിശ്വാസമുള്ള ഒരു ഡെവലപ്‌മെൻ്റ് ടീമിലേക്കും നയിക്കും. ഒരു ആഗോള പ്രേക്ഷകർക്കായി വികസിപ്പിക്കുമ്പോൾ ഇൻ്റർനാഷണലൈസേഷൻ വശങ്ങൾ പരിഗണിക്കാൻ ഓർമ്മിക്കുക, നിങ്ങളുടെ ടെസ്റ്റിംഗ് തന്ത്രം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന് വിപുലമായ ടെസ്റ്റിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിക്കുക. ശരിയായ യൂണിറ്റ് ടെസ്റ്റിംഗ് ടെക്നിക്കുകൾ പഠിക്കുന്നതിനും നടപ്പിലാക്കുന്നതിനും സമയം നിക്ഷേപിക്കുന്നത് ബഗുകൾ കുറച്ചും, കോഡിൻ്റെ ഗുണനിലവാരം മെച്ചപ്പെടുത്തിയും, പരിപാലനം ലളിതമാക്കിയും ദീർഘകാലാടിസ്ഥാനത്തിൽ നേട്ടങ്ങൾ നൽകും.