המדריך לדיבאגינג של בדיקות בריקאט

חלק חשוב ביותר מכל בדיקה שהיא הוא הדיבאגינג (Debugging – תהליך ניפוי שגיאות מהקוד). למה? כיוון שאם עוד איכשהו אפשר להסתדר בלי דיבאגינג כשכותבים בדיקות מאפס, כשבדיקה מסוימת נופלת ואין לנו מושג למה, זה חשוב במיוחד לעשות דיבאגינג לקוד או לבדיקה.

‍
דיבאגינג בכלל זה הליך חשוב מאוד שאנחנו מקבלים די בחינם, במאמר הזה אנו נעבור על דיבאגינג של בדיקות בריאקט בכמה דרכים. דרך התוסף של visual studio code (קל ומומלץ) ודרך כלי המפתחים של כרום (גם קל, וחסין לבעיות).

‍
ראשית, אנו נשתמש בדוגמה של המאמר הקודם כדי להתאמן. מה יש שם? מדובר בדוגמה מורכבת יחסית – של service ושל קומפוננטה שקוראת לו. פה אפשר לראות דוגמה מלאה של מה שהקומפוננטה הזו עושה. השארתי את ה-sourcemaps גלויים (בדרך כלל משהו שנחשב חולשת אבטחת מידע) כדי שתוכלו לבחון את העניין. שימו לב שאם ה-sourcemaps גלויים אפשר לדבג את האפליקציה הזו ממש כרגיל בלי שום בעיה עם כלי המפתחים.

‍

‍
אפשר כמובן להתקין את React Developer Tools כלי הפיתוח הייעודיים לריאקט שבאים בכרום בתוסף נחמד.

‍

אבל הבעיה (או יותר נכון יתרון) בבדיקות, כפי שראינו, היא שלא באמת משתמשים בדפדפן כדי להריץ אותן. מי שמריץ את הבדיקות האלו הוא Jest שמשתמש ב-JSDOM. אז איך מדבגים אותן?
הדרך הראשונה היא דרך התוסף החשוב והנחמד של Jest שזמין למי שמשתמש ב Visual Studio code, שהוא ה-IDE החביב עלי.

‍
1. התקינו את התוסף.
2. עשו ריסטרט ל visual studio code
3. פיתחו את קובץ הבדיקות, שימו break point והתחילו לדבג.

‍
כאן רואים את היתרון העצום של create react app שדיברנו עליה קודם, כי כל הדברים האלו באים בחינם ואפילו בלי הגדרות. אבל זה באמת קל מאוד.

‍

דרך שניה היא להשתמש בכלי המפתחים של כרום. מה עושים? ראשית, דואגים שב-package,json יהיה סקריפט כזה:

‍
   "test:debug": "node --inspect-brk node_modules/react-scripts/scripts/test.js --runInBand --no-cache",
מה זה הפתשגן הזה? זה פשוט להריץ את test.js שזה סקריפט שבא בחינם עם create react app עם כמה פלאגים. זה הכל. ברגע שיש לי את הפקודה הזו, אני יכול להריץ את הבדיקות באופן הבא:

‍
npm run test:debug MyComponent

‍
כאשר ה-MyComponent הוא שם הקומפוננטה והוא מחויב המציאות. אין מצב שהוא לא יהיה שם.

‍
מיד אחרי שנריץ את זה, נפתח את כלי המפתחים ונוכל לראות שיש אייקון קטן של node בכלי המפתחים. רגע, איך הוא הופיע שם? מאוד פשוט, מהרגע שהפעלתי את הדיבאגר, הוא החל לקיים תקשורת עם פורט שגם כלי המפתחים של גוגל מאזין לו. כלי המפתחים רואה שיש שם תנועה? האייקון מופיע.

‍

‍
לחיצה עליו תביא אותי לסקריפט של test.js. אין מה להיבהל, נלחץ על play ואחרי כן נוכל לקבל גישה לקבצים שלנו באמצעות control\cmd + p. נבחר נקודת עצירה ועכשיו אפשר להפעיל את הדיבאגר שוב ונראה שנעצור שוב בנקודת העצירה.

‍
בלי סרטון אי אפשר כמובן:

‍

‍

מאת: רן בר זיק, מתכנת מומחה ועיתונאי טכנולוגי

‍

רוצים להתעדכן בתכנים נוספים בנושאי ענן וטכנולוגיות מתקדמות? הירשמו עכשיו לניוזלטר שלנו ותמיד תישארו בעניינים > להרשמה

‍