הרצת בדיקות ב-JavaScript באמצעות Jest

הרצת בדיקות ב-JavaScript הוא תהליך שכדאי מאוד לעשות בעת פיתוח. באמצעותו תוכלו לוודא שהקוד שלכם מתנהג כפי שאתם מצפים ותוכלו לבדוק שהוא נשאר ככה גם בעתיד.
הרצת בדיקות באמצעות Jest הוא קל ונוח, בואו נתחיל.

למה לי להריץ בדיקות?

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

התקנת Jest

לפני שנתקין את Jest, ניצור קובץ package.json כמובן (לא מכירים את npm? קראו את המדריך שכתבתי: מדריך מקיף ומפורט על npm):

npm init

לאחר מכן נתקין את Jest:

npm i jest --save-dev

*חשוב לשים לב שהיא מוגדרת כ-dev dependency.

כעת נפתח את קובץ package.json וב-test תחת scripts נכתוב פשוט "jest".

כך זה נראה כרגע:

קובץ הבדיקות

נאמר שנרצה לבצע בדיקות לפונקציות שנמצאות בקובץ בשם functions.js המכיל את הפונקציה הבאה:

module.exports = {
    sum: (a, b) => {
        return a + b;
    }
};

שימו לב שהפונקציה נמצאת ב-module.exports על מנת שאוכל לקרוא לה בקובץ הבדיקות.
על מנת להריץ בדיקה באמצעות jest לקובץ בשם functions.js עלינו ליצור קובץ שנקרא בדיוק אותו הדבר אבל עם התוספת test, כלומר functions.test.js.
בקובץ זה נעשה require לפונקציות:

const functions = require('./functions');

כעת הקובץ מוכן ואפשר להזין בדיקות לתוכו.

בדיקה לפונקציה sum תיראה משהו כזה:

test('Adding two numbers (2 + 3 = 5)', () => {
    expect(functions.sum(2,3)).toBe(5);
});

מה קורה פה?
אל תוך test הוזנו 2 דברים: תיאור הבדיקה ופונקציה שבתוכה מתבצעת בדיקה של הפונקציה בשם sum על ידי המתודה בשם toBe.
זה רק נראה ונשמע מסובך, במילים פשוטות אמרנו ל-Jest לבדוק האם הפונקציה sum שמקבלת 2 ו-3 מחזירה 5.

איך מריצים את הבדיקה? פשוט מאוד:

npm test

ניתן לראות שלאחר כמה שניות קיבלנו ב-console את הפלט של הבדיקה:

נחמד!

מה יקרה במקרה של תוצאה לא צפויה?
נשנה את הבדיקה ל:

test('Adding two numbers (2 + 3 = 5)', () => {
    expect(functions.sum(2,3)).toBe(8);
});

נריץ את הבדיקה שוב, וזה מה שנקבל:

מדהים, לא?

בדיקות נוספות

המתודה בשם toBe הוא רק אחד מתוך רבים.
נוכל נבצע בדיקה אם התקבל null באמצעות המתודה בשם-toBeNull, כך נראה קובץ ה-functions.js כרגע:

module.exports = {
    sum: (a, b) => {
        return a + b;
    },
    returnNull: () => {
        return null;
    }
};

וכך נראה הקובץ functions.test.js כרגע:

const functions = require('./functions');

test('Adding two numbers (2 + 3 = 5)', () => {
    expect(functions.sum(2,3)).toBe(5);
});

test('Check if is null', () => {
    expect(functions.returnNull()).toBeNull();
});

מאחר והפונקציה returnNull החזירה null (תגידו שזה לא הפתיע אתכם!) הבדיקה תצליח:

בואו נעשה את זה קצת יותר מעניין. בדיקה אם מערך מכיל איבר מסוים באמצעות המתודה בשם-toContain.
הפונקציה:

getNames: () => {
        return ['John', 'Jessica', 'David'];
},

הבדיקה:

test('Check if names array contain John', () => {
    expect(functions.getNames()).toContain('John');
});

והתוצאה:

בדיקה אחרונה לסיום, ביצוע שכפול של מערך.
הפונקציה:

cloneArr: (arr) => {
    return [...arr];
}

הבדיקה:

test('Clone array test', () => {
    const myArr = [1,2,4,8];
    expect(functions.cloneArr(myArr)).toBe(myArr);
});

התוצאה:

רגע, הבדיקה נכשלה, מדוע?
פשוט מאוד, אמנם המערך שוכפל אבל מאחר ומערך הוא by reference ולא by value (לא מכירים? קראו את המדריך שכתבתי: זהירות, זה מבלבל: ההבדל בין Value ל- Reference ב-JavaScript) ולמרות שהאיברים של המערכים זהים, מדובר בשני מערכים שונים לגמרי.
שימוש במתודה בשם toEqual יעבור את הבדיקה שלנו בהצלחה:

פלט מפורט יותר באמצעות שימוש ב-coverage

על מנת שפלט הבדיקות שלנו יהיה מפורט יותר, נחזור לקובץ package.json וליד jest נשים את ה: coverage–, כך:

כעת נריץ את הבדיקות שוב:

ניתן לראות שנוספה לנו טבלה מאוד מעניינת שאומרת לנו קצת יותר. זה טוב במיוחד לדעת שלא "שכחנו" לבצע בדיקה כלשהי.
אם נוסיף לקובץ functions פונקציה ולא נזין לה בדיקה, זה הדוח שיחזור לנו:

ניתן לראות שרק 80% מהפונקציות שבקובץ functions.js נבדקו.

סיכום

אין ספק שהרצת בדיקות ב-JavaScript הוא תהליך שכדאי מאוד לאמץ. הוא יכול למנוע בעיות מיותרות.
על מנת למצוא מתודות נוספות לבדיקות לחצו כאן.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)