הרצת בדיקות ב-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".

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

כך נראה קובץ ה-package.json כרגע.
כך נראה קובץ ה-package.json כרגע.

קובץ הבדיקות

נאמר שנרצה לבצע בדיקות לפונקציות שנמצאות בקובץ בשם 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 (תגידו שזה לא הפתיע אתכם!) הבדיקה תצליח:

הבדיקה עברה בהצלחה מאחר ובאמת חזר null.
הבדיקה עברה בהצלחה מאחר ובאמת חזר null.

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

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

הבדיקה:

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

והתוצאה:

הבדיקה עברה בהצלחה מאחר ו-John אכן מופיע במערך.
הבדיקה עברה בהצלחה מאחר ו-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–, כך:

כך נראה קובץ ה-package.json כרגע.
כך נראה קובץ ה-package.json כרגע.

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

הפלט אכן מפורט יותר לאחר שימוש ב-coverage.
הפלט אכן מפורט יותר לאחר שימוש ב-coverage.

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

שוב, פלט מפורט יותר שמראה שלא כל הפונקציות נבדקות.
שוב, פלט מפורט יותר שמראה שלא כל הפונקציות נבדקות.

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

סיכום

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

בהצלחה!

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


2 תגובות בנושא “הרצת בדיקות ב-JavaScript באמצעות Jest”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *