בדיקות בפרונטאנד - Vitest ו-E2E - מדריך למתחילים

הרבה מתכנתים מתחילים חושבים על בדיקות (tests) כעל משהו שעושים "כשיהיה זמן", ואז אף פעם לא באמת עושים. הבעיה היא שבפרונטאנד, שבו קוד משתנה מהר ורכיבים תלויים אחד בשני, בדיקות הן בדיוק מה שמונע ממכם לשבור דבר אחד בזמן שאתם מתקנים דבר אחר.

השאלה הראשונה שצריך לענות עליה היא לא "איך כותבים בדיקה", אלא "איזה סוג בדיקה מתאים לאיזה מצב".

פירמידת הבדיקות בקצרה

מקובל לחשוב על בדיקות בשלוש רמות:

• בדיקות יחידה - Unit Tests. בודקות פונקציה אחת או רכיב קטן בבידוד, מהר מאוד להריץ, וזול לכתוב.
• בדיקות אינטגרציה. בודקות כמה חלקים שעובדים ביחד - למשל טופס שמעדכן state ומציג הודעת שגיאה.
• בדיקות מקצה לקצה - E2E. מדמות משתמש אמיתי שפותח דפדפן, לוחץ, ממלא טפסים, ועובר בין דפים.

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

Vitest - למה זה הפך לברירת מחדל

Vitest הוא כלי הרצת בדיקות שנבנה במיוחד לעבוד טוב עם כלים מודרניים כמו Vite. הוא מהיר מאוד, כי הוא משתמש באותה תשתית בנייה שמריצה את הפרויקט בזמן פיתוח, ולרוב הוא תואם כמעט אחד לאחד ל-API של Jest, כך שמעבר בין השניים לא כרוך בשינוי חשיבה גדול.

בדיקת יחידה פשוטה עם Vitest נראית ככה:

import { describe, it, expect } from "vitest";
import { sum } from "./sum";

describe("sum", () => {
  it("מחזירה את הסכום הנכון", () => {
    expect(sum(2, 3)).toBe(5);
  });
});

ל-Vitest יש גם תמיכה בבדיקות רכיבים בשילוב עם ספריות כמו Testing Library, שמאפשרות לבדוק לא רק לוגיקה טהורה אלא גם התנהגות של רכיב - למשל שכפתור מציג טקסט נכון ומגיב ללחיצה.

בדיקות End-to-End - כשצריך את התמונה המלאה

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

בדיקת E2E טיפוסית תפתח דף התחברות, תמלא שם משתמש וסיסמה, תלחץ על כפתור, ותוודא שהמשתמש הגיע לעמוד הבית. זה איטי יותר מבדיקת יחידה, אבל תופס בעיות שאף בדיקה אחרת לא תתפוס.

כמה בדיקות זה מספיק

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

מאיפה מתחילים ללמוד

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

לסיכום

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

יש לכם שאלה על בדיקה שנכשלת לכם בלי סיבה ברורה? שאלו בקהילה.

הצטרפו לקהילה בדיסקורד