כתיבת מבחנים יכולה להיות מייגעת וחוזרת על עצמה. אתה עשוי להרגיש שאתה מבזבז זמן יקר שאתה מעדיף להשתמש בו כדי לעבוד על תכונות. עם זאת, אם אתה רוצה לשלוח אפליקציות שאתה בטוח בהן, עליך לכתוב מבחנים.
בדיקה מאפשרת לך לתפוס טעויות ובאגים שאחרת אתה עלול לשלוח למשתמשים. לכן, זה משפר את חווית המשתמש של האפליקציה שלך וחוסך ממך את הצורך לנפות באגים בקוד ייצור.
אתה יכול בקלות לכתוב מבחנים ב-React באמצעות Jest ו-React Testing Library.
מה כדאי לבדוק ב-React?
ההחלטה מה לבדוק יכולה להיות קשה. למרות שהבדיקות מעולות, אתה לא צריך לבדוק כל שורה באפליקציית React שלך. פעולה זו תשאיר אותך עם מבחנים שבירים אשר שוברים את השינוי הקטן ביותר באפליקציה שלך.
במקום זאת, עליך לבדוק רק את הטמעת משתמש הקצה. המשמעות היא לבדוק כיצד משתמש הקצה ישתמש באפליקציה שלך במקום לבדוק את פעולתה הפנימית של האפליקציה שלך.
יתר על כן, ודא שאתה בודק את הרכיבים הנפוצים ביותר באפליקציה שלך, כמו דף הנחיתה או רכיב הכניסה. כמו כן, בדוק את התכונות החשובות ביותר באפליקציה שלך. לדוגמה, אלה עשויים להיות תכונות שמכניסות כסף, כמו תכונת עגלת הקניות.
כאשר מחליטים מה לבדוק, דבר אחד שכדאי לזכור הוא לעולם לא לבדוק פונקציונליות שבה React מטפלת בעצמה. לדוגמה, במקום לבדוק את תקפות האביזרים, אתה יכול להשתמש ב-React PropTypes.
בדיקת רכיב כפתור
זכור, עליך לבדוק רק את הטמעת משתמש הקצה של רכיב ולא את פעולתו הפנימית. עבור רכיב כפתור, זה אומר לוודא שהוא מעבד מבלי לקרוס ומוצג כהלכה.
צור קובץ חדש ב- src תיקייה שנקראת Button.js והוסיפו את הקוד הבא.
פוּנקצִיָהלַחְצָן({ערך}) {
לַחֲזוֹר (
<לַחְצָן>{ערך}</button>
)
}
יְצוּאבְּרִירַת מֶחדָל לַחְצָן
Button.js מקבל אביזר שנקרא ערך ומשתמש בו כערך הכפתור.
כתיבת המבחן הראשון שלך
א אפליקציית create-react-app מגיע מותקן מראש עם Jest ו-React Testing Library. Jest היא ספריית בדיקות קלת משקל עם פונקציות לעג והצהרה מובנות. זה עובד עם רבים מסגרות JavaScript. ספריית בדיקות ה-React, לעומת זאת, מספקת פונקציות שיעזרו לך לבדוק כיצד משתמשים מקיימים אינטראקציה עם רכיבים.
צור קובץ חדש בשם Button.test.js בתיקיית src. כברירת מחדל, Jest מזהה קבצים עם סיומת .test.js כקובצי בדיקה ומריץ אותם באופן אוטומטי. אפשרות נוספת היא להוסיף את קובצי הבדיקה שלך לתיקיה בשם __מבחנים__.
הוסף את הקוד הבא ב-Button.test.js כדי ליצור את הבדיקה הראשונה.
יְבוּא { render } מ '@testing-library/react';
יְבוּא לַחְצָן מ '../לַחְצָן';
לְתַאֵר('רכיב כפתור', () => {
מִבְחָן('מעבד את רכיב הכפתור מבלי לקרוס', () => {
לְדַקלֵם(<לחצן />);
});
})
בדיקה זו מגדירה תחילה במה עוסקת הבדיקה באמצעות בלוק התיאור שסופק על ידי Jest. בלוק זה שימושי לקיבוץ מבחנים קשורים. כאן אתה מקבץ את הבדיקות עבור רכיב הלחצן.
בתוך בלוק התיאור, יש לך את המבחן הראשון בבלוק הבדיקה. בלוק זה מקבל מחרוזת המתארת מה הבדיקה צריכה לעשות ופונקציית callback שמבצעת את הציפייה.
בדוגמה זו, הבדיקה אמורה להציג את רכיב ה-Button מבלי לקרוס. שיטת הרינדור מספריית בדיקות React מבצעת את הבדיקה בפועל. הוא בודק אם רכיב הלחצן מוצג כהלכה. אם כן, המבחן עובר, אחרת הוא נכשל.
שימוש בתפקידים כדי למצוא את הכפתור
לפעמים אתה רוצה לבדוק אם האלמנט הותקן. לשיטת המסך יש פונקציה getByRole() שבה אתה יכול להשתמש כדי לתפוס אלמנט מה-DOM.
screen.getByRole('לַחְצָן')
לאחר מכן תוכל להשתמש באלמנט שתפסת כדי לבצע בדיקות כמו לבדוק אם הוא קיים במסמך או שהוצג כהלכה.
getByRole() היא אחת מני רבות מהשאילתות שבהן תוכל להשתמש כדי לבחור אלמנטים ברכיב. בדוק סוגים אחרים של שאילתות ב-The React Testing Library's מדריך "באיזו שאילתה עלי להשתמש". גם מלבד תפקיד ה"כפתור", רוב רכיבי HTML סמנטיים יש תפקידים מרומזים שבהם אתה יכול להשתמש כדי לבצע את השאילתות שלך. מצא את רשימת התפקידים מ מסמכי MDN.
הוסף את הדברים הבאים לבלוק הבדיקה כדי לאמת את העיבוד של הרכיבים.
מִבְחָן('כפתור עיבוד מבלי לקרוס', () => {
לְדַקלֵם(<ערך הכפתור="הירשם" />);
expect (screen.getByRole('לַחְצָן')).toBeInTheDocument()
});
תואם toBeInTheDocument() בודק אם רכיב הלחצן קיים במסמך.
צפו שהלחצן יוצג בצורה נכונה
רכיב הלחצן מקבל ערך אבזר ומציג אותו. כדי שהוא יוצג כראוי, הערך שהוא מציג חייב להיות זהה לזה שהעברת.
צור בלוק בדיקה חדש והוסף את הקוד הבא.
מִבְחָן('מעבד כפתור כהלכה', () => {
לְדַקלֵם(<ערך הכפתור="התחברות" />);
expect (screen.getByRole('לַחְצָן')).toHaveTextContent("התחברות")
})
שים לב שאינך צריך לבצע ניקויים לאחר בדיקות בעת שימוש בספריית בדיקות React. בגרסאות קודמות, תצטרך לבצע את הניקוי באופן ידני כך:
afterEach (ניקוי)
כעת, ספריית הבדיקה מבטלת רכיבים אוטומטית לאחר כל רינדור.
יצירת בדיקות Snapshot
עד כה, בדקת את ההתנהגות של רכיב ה-Button. כתוב בדיקות תמונת מצב כדי לבדוק אם הפלט של הרכיב נשאר זהה.
מבחני Snapshot משווים את הפלט הנוכחי לפלט מאוחסן של הרכיב. לדוגמה, אם תשנה את הסגנון של רכיב Button, בדיקת תמונת המצב תודיע לך. אתה יכול לעדכן את תמונת המצב כך שתתאים לרכיב שהשתנה או לבטל את השינויים בסגנון.
מבחני תמונת מצב שימושיים מאוד בכל פעם שאתה רוצה לוודא שממשק המשתמש שלך לא ישתנה באופן בלתי צפוי.
בדיקת תמונת מצב שונה מבדיקות יחידה מכיוון שאתה צריך כבר קוד עובד כדי ליצור את תמונת המצב.
אתה תשתמש בשיטת ה-renderer מחבילת react-test-renderer npm. אז, הפעל את הקוד הבא כדי להתקין אותו.
npm להתקין לְהָגִיב-מִבְחָן-מרנדר
ב-Button.test.js, כתוב את מבחן תמונת המצב באופן הבא:
מִבְחָן('תואם תמונת מצב', () => {
const tree = renderer.create(<ערך הכפתור="התחברות" />).toJSON();
לְצַפּוֹת(עֵץ).toMatchSnapshot();
})
אין תמונות קיימות עבור רכיב ה-Button, לכן הפעלת בדיקה זו תיצור קובץ תמונת מצב לצד קובץ הבדיקה:
לַחְצָן
└─── __מבחנים__
│ │ לַחְצָן.בדיקות.js
│ └─── __תמונה__
│ │ לַחְצָן.מִבְחָן.js.לְצַלֵם
│
└─── לַחְצָן.js
כעת, כאשר תריצו את הבדיקה הבאה, React תשווה את תמונת המצב החדשה שהיא מייצרת עם התמונה המאוחסנת.
כתוב מבחנים עבור הרכיבים הנפוצים ביותר
מדריך זה לימד אותך איך לכתוב מבחני DOM וצילום מצב ב-React על ידי בדיקת רכיב Button. כתיבת מבחנים עבור כל הרכיבים שאתה יוצר עלולה להיות מייגעת. עם זאת, בדיקות אלו חוסכות לך את הזמן שהיית מבלה בניפוי באגים בקוד שכבר נפרס.
אינך צריך להשיג 100 אחוז כיסוי מבחן, אך וודא שאתה כותב מבחנים עבור הרכיבים המשומשים והחשובים ביותר שלך.
