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

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

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

ראשית, אנו נשתמש בדוגמה של המאמר הקודם כדי להתאמן. מה יש שם? מדובר בדוגמה מורכבת יחסית – של service ושל קומפוננטה שקוראת לו. פה אפשר לראות דוגמה מלאה של מה שהקומפוננטה הזו עושה. השארתי את ה-sourcemap גלויים (בדרך כלל משהו שנחשב חולשת אבטחת מידע) כדי שתוכלו לבחון את העניין. שימו לב שאם ה-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 בכלי המפתחים. רגע, איך הוא הופיע שם? מאוד פשוט, מהרגע שהפעלתי את הדיבאגר, הוא החל לקיים תקשורת עם פורט שגם כלי המפתחים של גוגל מאזין לו. כלי המפתחים רואה שיש שם תנועה? האייקון מופיע.

אייקון של node בכלי המפתחים
אייקון של node בכלי המפתחים

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

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

במאמר הבא נדבר על דו״ח בדיקות שגם הוא חשוב ואז אל… רידקס. מבטיח.

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (4 הצבעות, ממוצע: 3.50 מתוך 5)

תגיות: פורסם בקטגוריה: ריאקט

יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

כתיבת תגובה

האימייל לא יוצג באתר.

רישום