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

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

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

דיבאגינג בכלל זה הליך חשוב מאוד שאנחנו מקבלים די בחינם, במאמר הזה אנו נעבור על דיבאגינג של בדיקות בריאקט בכמה דרכים. דרך התוסף של 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. נבחר נקודת עצירה ועכשיו אפשר להפעיל את הדיבאגר שוב ונראה שנעצור שוב בנקודת העצירה.

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

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

ריאקט משתדרגת ומתעדכנת, יש לנו hooks ו-HoC וכמובן הקומפוננטות מבוססות הקלאסים יורדות מגדולתן. הכל נמצא בספר שלי "ללמוד ריאקט בעברית". ספר שלם, ערוך על ידי מיטב המתכנתים ומעוצב – אם עברתם על כל המדריכים שלי – יש סיכוי גבוה שתמצאו עניין ותועלת גם בספר.

פוסטים נוספים שכדאי לקרוא

ספריות ומודולים

להתנסות ב AutoGPT

הטרנד החם בעולם ה-GPT וה-AI – הפעלת אייג׳נטים בקלות עם Auto GPT.

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

גלילה לראש העמוד