ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟ್‌ಗಳೊಂದಿಗೆ React ಕಾಂಪೋನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಸಾಧಿಸಿ. ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಕೋಡ್‌ಗಾಗಿ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು, ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ತಿಳಿಯಿರಿ.
React ಕಾಂಪೋನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್: ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್‌ನ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಜಗತ್ತಿನಲ್ಲಿ, ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಗತ್ಯ. React, ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಮುಖ JavaScript ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, React ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸಂಕೀರ್ಣತೆಯು ಕೋಡ್ ಗುಣಮಟ್ಟವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಹಿನ್ನಡೆಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಸಮಗ್ರ ಟೆಸ್ಟಿಂಗ್ ಕಾರ್ಯತಂತ್ರದ ಅಗತ್ಯವಿದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ React ಟೆಸ್ಟಿಂಗ್‌ನ ನಿರ್ಣಾಯಕ ಅಂಶದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ: ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್.
ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಎಂದರೇನು?
ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಎನ್ನುವುದು ಒಂದು ಸಾಫ್ಟ್‌ವೇರ್ ಟೆಸ್ಟಿಂಗ್ ತಂತ್ರವಾಗಿದ್ದು, ಇದರಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್‌ಗಳು ಅಥವಾ ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಸಿಸ್ಟಂನ ಇತರ ಭಾಗಗಳಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಪರೀಕ್ಷಿಸಲಾಗುತ್ತದೆ. React ನ ಸಂದರ್ಭದಲ್ಲಿ, ಇದರರ್ಥ ಪ್ರತ್ಯೇಕ React ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಅವಲಂಬನೆಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗದೆ ಪರೀಕ್ಷಿಸುವುದು, ಉದಾಹರಣೆಗೆ ಚೈಲ್ಡ್ ಕಾಂಪೋನೆಂಟ್‌ಗಳು, ಬಾಹ್ಯ API ಗಳು ಅಥವಾ Redux ಸ್ಟೋರ್. ಪ್ರತಿ ಕಾಂಪೋನೆಂಟ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ನೀಡಿದಾಗ, ಬಾಹ್ಯ ಅಂಶಗಳ ಪ್ರಭಾವವಿಲ್ಲದೆ, ನಿರೀಕ್ಷಿತ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸುವುದು ಪ್ರಾಥಮಿಕ ಗುರಿಯಾಗಿದೆ.
ಪ್ರತ್ಯೇಕತೆ ಏಕೆ ಮುಖ್ಯ?
ಟೆಸ್ಟ್ ಮಾಡುವಾಗ ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವುದು ಹಲವಾರು ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:
- ವೇಗದ ಟೆಸ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಷನ್: ಪ್ರತ್ಯೇಕ ಟೆಸ್ಟ್‌ಗಳು ಸಂಕೀರ್ಣ ಸೆಟಪ್ ಅಥವಾ ಬಾಹ್ಯ ಅವಲಂಬನೆಗಳೊಂದಿಗೆ ಸಂವಹನವನ್ನು ಒಳಗೊಂಡಿರುವುದಿಲ್ಲವಾದ್ದರಿಂದ ಬಹಳ ವೇಗವಾಗಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತವೆ. ಇದು ಅಭಿವೃದ್ಧಿ ಚಕ್ರವನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಆಗಾಗ್ಗೆ ಟೆಸ್ಟ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
- ಕೇಂದ್ರೀಕೃತ ದೋಷ ಪತ್ತೆ: ಒಂದು ಟೆಸ್ಟ್ ವಿಫಲವಾದಾಗ, ಟೆಸ್ಟ್ ಒಂದೇ ಕಾಂಪೋನೆಂಟ್ ಮತ್ತು ಅದರ ಆಂತರಿಕ ತರ್ಕದ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾಗಿರುವುದರಿಂದ ಕಾರಣವು ತಕ್ಷಣವೇ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ಇದು ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಅಗತ್ಯವಿರುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ಕಡಿಮೆಯಾದ ಅವಲಂಬನೆಗಳು: ಪ್ರತ್ಯೇಕ ಟೆಸ್ಟ್‌ಗಳು ಅಪ್ಲಿಕೇಶನ್‌ನ ಇತರ ಭಾಗಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಕಡಿಮೆ ಒಳಗಾಗುತ್ತವೆ. ಇದು ಟೆಸ್ಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕವಾಗಿಸುತ್ತದೆ ಮತ್ತು ಸುಳ್ಳು ಧನಾತ್ಮಕ ಅಥವಾ ಋಣಾತ್ಮಕಗಳ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ಸುಧಾರಿತ ಕೋಡ್ ವಿನ್ಯಾಸ: ಪ್ರತ್ಯೇಕ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯುವುದು ಡೆವಲಪರ್‌ಗಳನ್ನು ಸ್ಪಷ್ಟವಾದ ಜವಾಬ್ದಾರಿಗಳು ಮತ್ತು ಉತ್ತಮ-ವ್ಯಾಖ್ಯಾನಿತ ಇಂಟರ್‌ಫೇಸ್‌ಗಳೊಂದಿಗೆ ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ. ಇದು ಮಾಡ್ಯುಲಾರಿಟಿಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ವರ್ಧಿತ ಟೆಸ್ಟಬಿಲಿಟಿ: ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಸುಲಭವಾಗಿ ಅವಲಂಬನೆಗಳನ್ನು ಮರೆಮಾಡಬಹುದು ಅಥವಾ ಸ್ಟಬ್ ಮಾಡಬಹುದು, ಇದು ನಿಜ-ಪ್ರಪಂಚದ ಪರಿಸರದಲ್ಲಿ ಪುನರುತ್ಪಾದಿಸಲು ಕಷ್ಟವಾಗಬಹುದಾದ ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಅಂಚಿನ ಸಂದರ್ಭಗಳನ್ನು ಅನುಕರಿಸಲು ಅವರಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
React ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್‌ಗಾಗಿ ಪರಿಕರಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳು
React ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಸುಗಮಗೊಳಿಸಲು ಹಲವಾರು ಶಕ್ತಿಯುತ ಪರಿಕರಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳು ಲಭ್ಯವಿದೆ. ಇಲ್ಲಿ ಕೆಲವು ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳಿವೆ:
- Jest: Jest ಎಂಬುದು Facebook (ಈಗ Meta) ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ JavaScript ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ, ಇದು ವಿಶೇಷವಾಗಿ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಮ್ಯಾಕಿಂಗ್, ಅಸೆರ್ಷನ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಕೋಡ್ ಕವರೇಜ್ ವಿಶ್ಲೇಷಣೆ ಸೇರಿದಂತೆ ಸಮಗ್ರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. Jest ಅದರ ಬಳಕೆಯ ಸುಲಭತೆ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹೆಸರುವಾಸಿಯಾಗಿದೆ.
- React Testing Library: React Testing Library ಎಂಬುದು ಬಳಕೆದಾರರ ದೃಷ್ಟಿಕೋನದಿಂದ ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಪ್ರೋತ್ಸಾಹಿಸುವ ಹಗುರವಾದ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇದು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಅನುಕರಿಸುವ ರೀತಿಯಲ್ಲಿ ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಪ್ರಶ್ನಿಸಲು ಮತ್ತು ಸಂವಹನ ನಡೆಸಲು ಯುಟಿಲಿಟಿ ಕಾರ್ಯಗಳ ಗುಂಪನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಬಳಕೆದಾರರ ಅನುಭವದೊಂದಿಗೆ ಹೆಚ್ಚು ನಿಕಟವಾಗಿ ಜೋಡಿಸಲಾದ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಲು ಉತ್ತೇಜಿಸುತ್ತದೆ.
- Enzyme: Enzyme ಎಂಬುದು Airbnb ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ React ಗಾಗಿ JavaScript ಟೆಸ್ಟಿಂಗ್ ಯುಟಿಲಿಟಿ ಆಗಿದೆ. ಇದು React ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ಅವುಗಳ ಆಂತರಿಕ, ಅಂದರೆ ಪ್ರೊಪ್ಸ್, ಸ್ಟೇಟ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಕಾರ್ಯಗಳ ಗುಂಪನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಇನ್ನೂ ಅನೇಕ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತಿದೆಯಾದರೂ, React Testing Library ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ.
- Mocha: Mocha ಎಂಬುದು ವಿವಿಧ ಅಸೆರ್ಷನ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಮ್ಯಾಕಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬಳಸಬಹುದಾದ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ JavaScript ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ. ಇದು ಸ್ವಚ್ಛ ಮತ್ತು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದ ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- Chai: Chai ಎಂಬುದು Mocha ಅಥವಾ ಇತರ ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬಳಸಬಹುದಾದ ಜನಪ್ರಿಯ ಅಸೆರ್ಷನ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇದು expect, should, ಮತ್ತು assert ಸೇರಿದಂತೆ ಸಮೃದ್ಧ ಅಸೆರ್ಷನ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
- Sinon.JS: Sinon.JS ಎಂಬುದು JavaScript ಗಾಗಿ ಸ್ಟ್ಯಾಂಡ್‌ಅಲೋನ್ ಟೆಸ್ಟ್ ಸ್ಪೈಗಳು, ಸ್ಟಬ್‌ಗಳು ಮತ್ತು ಮಾಗೆಗಳು. ಇದು ಯಾವುದೇ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಹೆಚ್ಚಿನ ಆಧುನಿಕ React ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ, ಶಿಫಾರಸು ಮಾಡಲಾದ ಸಂಯೋಜನೆಯು Jest ಮತ್ತು React Testing Library ಆಗಿದೆ. ಈ ಸಂಯೋಜನೆಯು React ಟೆಸ್ಟಿಂಗ್‌ಗಾಗಿ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಜೋಡಿಸಲಾದ ಶಕ್ತಿಯುತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಟೆಸ್ಟಿಂಗ್ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ನಿಮ್ಮ ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ಹೊಂದಿಸುವುದು
ನೀವು ಯೂನಿಟ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನಿಮ್ಮ ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ನೀವು ಹೊಂದಿಸಬೇಕಾಗಿದೆ. Jest ಮತ್ತು React Testing Library ಅನ್ನು ಹೊಂದಿಸಲು ಇಲ್ಲಿ ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ ಇದೆ:
- ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-env @babel/preset-react- jest: Jest ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್.
- @testing-library/react: ಕಾಂಪೋನೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು React Testing Library.
- @testing-library/jest-dom: DOM ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕಸ್ಟಮ್ Jest ಮ್ಯಾಚರ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
- babel-jest: Jest ಗಾಗಿ JavaScript ಕೋಡ್ ಅನ್ನು ಪರಿವರ್ತಿಸುತ್ತದೆ.
- @babel/preset-env: ನಿಮ್ಮ ಗುರಿ ಪರಿಸರ(ಗಳ)ಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್‌ಗಳನ್ನು (ಮತ್ತು ಐಚ್ಛಿಕವಾಗಿ, ಬ್ರೌಸರ್ ಪಾಲಿಫಿಲ್ಸ್) ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೆ ಇತ್ತೀಚಿನ JavaScript ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಮಾರ್ಟ್ ಪ್ರಿಸೆಟ್.
- @babel/preset-react: ಎಲ್ಲಾ React ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ Babel ಪ್ರಿಸೆಟ್.
- Babel ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ (babel.config.js):
module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-react', ], }; - Jest ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ (jest.config.js):
module.exports = { testEnvironment: 'jsdom', setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'], moduleNameMapper: { '\.(css|less|scss)$': 'identity-obj-proxy', }, };- testEnvironment: 'jsdom': ಟೆಸ್ಟಿಂಗ್ ಪರಿಸರವನ್ನು ಬ್ರೌಸರ್-ನಂತಹ ಪರಿಸರವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
- setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']: ಟೆಸ್ಟ್ ಪರಿಸರವನ್ನು ಹೊಂದಿಸಿದ ನಂತರ ರನ್ ಮಾಡಲು ಒಂದು ಫೈಲ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ Jest ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಮತ್ತು ಕಸ್ಟಮ್ ಮ್ಯಾಚರ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
- moduleNameMapper: ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಕಾಂಪೋನೆಂಟ್‌ಗಳಲ್ಲಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದನ್ನು ತಡೆಯುವ ಮೂಲಕ CSS/SCSS ಆಮದುಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. `identity-obj-proxy` ಎಂಬುದು ಸ್ಟೈಲ್‌ನಲ್ಲಿ ಬಳಸಲಾದ ಕ್ಲಾಸ್ ಹೆಸರಿಗೆ ಅನುಗುಣವಾದ ಪ್ರತಿಯೊಂದು ಕೀ ಮತ್ತು ಆ ಕ್ಲಾಸ್ ಹೆಸರೇ ಮೌಲ್ಯವಾಗಿರುವ ವಸ್ತುವನ್ನು ರಚಿಸುತ್ತದೆ.
- setupTests.js (src/setupTests.js) ರಚಿಸಿ:
import '@testing-library/jest-dom/extend-expect';ಈ ಫೈಲ್ `@testing-library/jest-dom` ನಿಂದ ಕಸ್ಟಮ್ ಮ್ಯಾಚರ್‌ಗಳೊಂದಿಗೆ Jest ಅನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ, `toBeInTheDocument` ನಂತಹ.
- package.json ನವೀಕರಿಸಿ:
"scripts": { "test": "jest", "test:watch": "jest --watchAll" }ಟೆಸ್ಟ್‌ಗಳನ್ನು ರನ್ ಮಾಡಲು ಮತ್ತು ಬದಲಾವಣೆಗಳಿಗಾಗಿ ವೀಕ್ಷಿಸಲು ನಿಮ್ಮ `package.json` ಗೆ ಟೆಸ್ಟ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ.
ನಿಮ್ಮ ಮೊದಲ ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟ್ ಬರೆಯುವುದು
ಒಂದು ಸರಳ React ಕಾಂಪೋನೆಂಟ್ ರಚಿಸೋಣ ಮತ್ತು ಅದಕ್ಕಾಗಿ ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟ್ ಬರೆಯೋಣ.
ಉದಾಹರಣೆ ಕಾಂಪೋನೆಂಟ್ (src/components/Greeting.js):
import React from 'react';
function Greeting({ name }) {
return <h1>Hello, {name || 'World'}!</h1>;
}
export default Greeting;
ಟೆಸ್ಟ್ ಫೈಲ್ (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();
});
});
ವಿವರಣೆ:
- `describe` ಬ್ಲಾಕ್: ಸಂಬಂಧಿತ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡುತ್ತದೆ.
- `it` ಬ್ಲಾಕ್: ಪ್ರತ್ಯೇಕ ಟೆಸ್ಟ್ ಪ್ರಕರಣವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
- `render` ಫಂಕ್ಷನ್: ಕಾಂಪೋನೆಂಟ್ ಅನ್ನು DOM ಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
- `screen.getByText` ಫಂಕ್ಷನ್: ನಿರ್ದಿಷ್ಟ ಪಠ್ಯದೊಂದಿಗೆ ಒಂದು ಕಾಂಪೋನೆಂಟ್‌ಗಾಗಿ DOM ಅನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ.
- `expect` ಫಂಕ್ಷನ್: ಕಾಂಪೋನೆಂಟ್‌ನ ಔಟ್‌ಪುಟ್ ಬಗ್ಗೆ ಒಂದು ಹೇಳಿಕೆಯನ್ನು ನೀಡುತ್ತದೆ.
- `toBeInTheDocument` ಮ್ಯಾಚರ್: ಕಾಂಪೋನೆಂಟ್ DOM ನಲ್ಲಿ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
ಟೆಸ್ಟ್‌ಗಳನ್ನು ರನ್ ಮಾಡಲು, ನಿಮ್ಮ ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಕಮಾಂಡ್ ಅನ್ನು ಎಕ್ಸಿಕ್ಯೂಟ್ ಮಾಡಿ:
npm test
ಅವಲಂಬನೆಗಳನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವುದು
ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್‌ನಲ್ಲಿ, ಬಾಹ್ಯ ಅಂಶಗಳು ಟೆಸ್ಟ್ ಫಲಿತಾಂಶಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯಲು ಅವಲಂಬನೆಗಳನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಮ್ಯಾಕ್ ಮಾಡುವುದು ಎಂದರೆ ನೈಜ ಅವಲಂಬನೆಗಳನ್ನು ಟೆಸ್ಟ್ ಮಾಡುವಾಗ ನಿಯಂತ್ರಿಸಬಹುದಾದ ಮತ್ತು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಬಹುದಾದ ಸರಳೀಕೃತ ಆವೃತ್ತಿಗಳಿಂದ ಬದಲಾಯಿಸುವುದು.
ಉದಾಹರಣೆ: ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವುದು
ಒಂದು API ನಿಂದ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡುವ ಕಾಂಪೋನೆಂಟ್ ಅನ್ನು ನಾವು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಹೇಳೋಣ:
ಕಾಂಪೋನೆಂಟ್ (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;
ಟೆಸ್ಟ್ ಫೈಲ್ (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();
});
});
ವಿವರಣೆ:
- `jest.mock('./DataFetcher', ...)`: `DataFetcher` ಕಾಂಪೋನೆಂಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮ್ಯಾಕ್ ಮಾಡುತ್ತದೆ, ಅದರ ಮೂಲ ಅನುಷ್ಠಾನವನ್ನು ಮ್ಯಾಕ್ ಮಾಡಲಾದ ಆವೃತ್ತಿಯಿಂದ ಬದಲಾಯಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಕಾಂಪೋನೆಂಟ್‌ನೊಳಗಡೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ `fetchData` ಫಂಕ್ಷನ್ ಅನ್ನು ಒಳಗೊಂಡಂತೆ ಯಾವುದೇ ಬಾಹ್ಯ ಅವಲಂಬನೆಗಳಿಂದ ಪರೀಕ್ಷೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.
- `mockFetchData.mockResolvedValue({ name: 'Test Data' })` `fetchData` ಗಾಗಿ ಮ್ಯಾಕ್ ರಿಟರ್ನ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಇದು ಮ್ಯಾಕ್ ಮಾಡಿದ ಫಂಕ್ಷನ್‌ನಿಂದ ಹಿಂತಿರುಗಿದ ಡೇಟಾವನ್ನು ನಿಯಂತ್ರಿಸಲು ಮತ್ತು ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನುಕರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- `await waitFor(() => screen.getByText('Data:'))` "Data:" ಎಂಬ ಪಠ್ಯ ಕಾಣಿಸಿಕೊಳ್ಳುವವರೆಗೆ ಕಾಯುತ್ತದೆ, ಇದು ಹೇಳಿಕೆಗಳನ್ನು ನೀಡುವ ಮೊದಲು ಮ್ಯಾಕ್ ಮಾಡಿದ API ಕರೆ ಪೂರ್ಣಗೊಂಡಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವುದು
Jest ಸಂಪೂರ್ಣ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮ್ಯಾಕ್ ಮಾಡಲು ಶಕ್ತಿಯುತ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಒಂದು ಕಾಂಪೋನೆಂಟ್ ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳು ಅಥವಾ ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾದಾಗ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಡೇಟ್ ಯುಟಿಲಿಟಿಯನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವುದು
ನೀವು ಒಂದು ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್ ಬಳಸಿಕೊಂಡು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ದಿನಾಂಕವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾಂಪೋನೆಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಊಹಿಸಿ:
ಕಾಂಪೋನೆಂಟ್ (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;
ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್ (src/utils/dateUtils.js):
export function formatDate(date) {
return date.toLocaleDateString('en-US');
}
ಟೆಸ್ಟ್ ಫೈಲ್ (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();
});
});
ವಿವರಣೆ:
- `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;
ಟೆಸ್ಟ್ ಫೈಲ್ (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();
});
});
ವಿವರಣೆ:
- `<IntlProvider locale="fr" messages={{}}>` ಬಯಸಿದ ಸ್ಥಳ ಮತ್ತು ಖಾಲಿ ಸಂದೇಶ ವಸ್ತುವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, `IntlProvider` ನೊಂದಿಗೆ ಕಾಂಪೋನೆಂಟ್ ಅನ್ನು ಸುತ್ತುತ್ತದೆ.
- `screen.getByText('The date is: 01/01/2024')` ದಿನಾಂಕವನ್ನು ಫ್ರೆಂಚ್ ಸ್ವರೂಪದಲ್ಲಿ (ದಿನ/ತಿಂಗಳು/ವರ್ಷ) ರೆಂಡರ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಹೇಳುತ್ತದೆ.
`IntlProvider` ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ವಿಭಿನ್ನ ಸ್ಥಳಗಳನ್ನು ಅನುಕರಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೋನೆಂಟ್‌ಗಳು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಎಂದು ಪರಿಶೀಲಿಸಬಹುದು.
ಅಡ್ವಾನ್ಸ್ಡ್ ಟೆಸ್ಟಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್
ಮೂಲಗಳಾಚೆಗೆ, ನಿಮ್ಮ React ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಕಾರ್ಯತಂತ್ರವನ್ನು ಮತ್ತಷ್ಟು ಸುಧಾರಿಸಬಹುದಾದ ಹಲವಾರು ಅಡ್ವಾನ್ಸ್ಡ್ ಟೆಕ್ನಿಕ್ಸ್ ಇವೆ:
- ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಟೆಸ್ಟಿಂಗ್: ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಟೆಸ್ಟಿಂಗ್ ಎಂದರೆ ಕಾಂಪೋನೆಂಟ್‌ನ ರೆಂಡರ್ಡ್ ಔಟ್‌ಪುಟ್‌ನ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಅನ್ನು ಸೆರೆಹಿಡಿಯುವುದು ಮತ್ತು ಅದನ್ನು ಹಿಂದೆ ಸಂಗ್ರಹಿಸಿದ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್‌ನೊಂದಿಗೆ ಹೋಲಿಸುವುದು. ಇದು ಕಾಂಪೋನೆಂಟ್‌ನ UI ಯಲ್ಲಿನ ಅನಪೇಕ್ಷಿತ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, UI ಬದಲಾದಾಗ ಅವು ಸ್ಥಿರವಲ್ಲದ ಮತ್ತು ಆಗಾಗ್ಗೆ ನವೀಕರಣಗಳ ಅಗತ್ಯವಿರುವುದರಿಂದ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಬೇಕು.
- ಪ್ರಾಪರ್ಟಿ-ಬೇಸ್ಡ್ ಟೆಸ್ಟಿಂಗ್: ಪ್ರಾپرಟಿ-ಬೇಸ್ಡ್ ಟೆಸ್ಟಿಂಗ್ ಎಂದರೆ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ, ಕಾಂಪೋನೆಂಟ್‌ಗೆ ಯಾವಾಗಲೂ ನಿಜವಾಗಿರಬೇಕಾದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು. ಇದು ಒಂದೇ ಟೆಸ್ಟ್ ಪ್ರಕರಣದೊಂದಿಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. `jsverify` ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು JavaScript ನಲ್ಲಿ ಪ್ರಾپرಟಿ-ಬೇಸ್ಡ್ ಟೆಸ್ಟಿಂಗ್‌ಗೆ ಬಳಸಬಹುದು.
- ಪ್ರವೇಶಿಸುವಿಕೆ ಟೆಸ್ಟಿಂಗ್: ಪ್ರವೇಶಿಸುವಿಕೆ ಟೆಸ್ಟಿಂಗ್ ನಿಮ್ಮ ಕಾಂಪೋನೆಂಟ್‌ಗಳು ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸುವಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ. `react-axe` ನಂತಹ ಪರಿಕರಗಳನ್ನು ಟೆಸ್ಟ್ ಮಾಡುವಾಗ ನಿಮ್ಮ ಕಾಂಪೋನೆಂಟ್‌ಗಳಲ್ಲಿನ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆಹಚ್ಚಲು ಬಳಸಬಹುದು.
ತೀರ್ಮಾನ
ಪ್ರತ್ಯೇಕ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ React ಕಾಂಪೋನೆಂಟ್ ಟೆಸ್ಟಿಂಗ್‌ನ ಒಂದು ಮೂಲಭೂತ ಅಂಶವಾಗಿದೆ. ಕಾಂಪೋನೆಂಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುವ ಮೂಲಕ, ಅವಲಂಬನೆಗಳನ್ನು ಮ್ಯಾಕ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಗುಣಮಟ್ಟವನ್ನು ಖಚಿತಪಡಿಸುವ ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಣೆಯ ಯೋಗ್ಯ ಟೆಸ್ಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಮೊದಲೇ ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಉದ್ದಕ್ಕೂ ಅದನ್ನು ಸಂಯೋಜಿಸುವುದು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಸಾಫ್ಟ್‌ವೇರ್ ಮತ್ತು ಹೆಚ್ಚು ಆತ್ಮವಿಶ್ವಾಸವಿರುವ ಅಭಿವೃದ್ಧಿ ತಂಡಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಅಂತಾರಾಷ್ಟ್ರೀಕರಣದ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯಬೇಡಿ ಮತ್ತು ನಿಮ್ಮ ಟೆಸ್ಟಿಂಗ್ ಕಾರ್ಯತಂತ್ರವನ್ನು ಮತ್ತಷ್ಟು ಸುಧಾರಿಸಲು ಅಡ್ವಾನ್ಸ್ಡ್ ಟೆಸ್ಟಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್‌ಗಳನ್ನು ಬಳಸಿ. ಸರಿಯಾದ ಯೂನಿಟ್ ಟೆಸ್ಟಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್‌ಗಳನ್ನು ಕಲಿಯಲು ಮತ್ತು ಅಳವಡಿಸಲು ಸಮಯವನ್ನು ಹೂಡಿಕೆ ಮಾಡುವುದರಿಂದ ದೀರ್ಘಾವಧಿಯಲ್ಲಿ ದೋಷಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು, ಕೋಡ್ ಗುಣಮಟ್ಟವನ್ನು ಸುಧಾರಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುವುದರ ಮೂಲಕ ಲಾಭಾಂಶವನ್ನು ನೀಡುತ್ತದೆ.