טסטים בReact

למה צריך טסטים

על אפקט הפרפר שמעתם?
אפקט הפרפר זה ביטוי מייצג על מקרה בו משק' כנפי פרפר עשוי ליצור שינויים קטנים באטמוספירה
שבסופו של דבר יגרמו להופעת סופת טורנדו (או לחלופין ימנוע את הופעתה).
בגדול פעולה במקום אחד תשפיע באופן לא צפוי במקום אחר...
אוקיי... מה הקשר בין זה לבין טסטים.
אז זהו ש...
שתי הבעיות הנפוצות ביותר בפיתוח של פרוייקטים אחד הקנה מידה (scale) של הפרוייקט,
שתיים התחזוקה של הפרוייקט.
ככל שהקנה מידה של הפרוייקט עולה כך גם הסיכוי לבאגים,
ויותר מזה הסיכוי שהקוד הבא שתוסיף, יפגע בקוד קיים שיכול להקריס את הפרוייקט (סופת הטורנדו),
בשביל זה נועדו הטסטים המטרה המרכזית למנוע כאוס!! בפרוייקט שלנו,
שהאפליקציה שלנו גדלה אנו יכולים להשתמש בטסטים כדי לאמת בכל שינוי
שהוא לא פגע בקוד אחר בפרוייקט וכך למנוע טעויות.
דבר נוסף התחזוקה של הפרוייקט תשתפר כתוצאה מזה שנוכל לקבל את השגיאות ולהבין איפה טעינו
דבר שיסייע לנו למנוע הוצאת גרסה פגומה.

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

איך להטמיע את jest בפרוייקט בVite

npm install jest --save-dev - jest framework

איך להטמיע את jest בפרוייקט בVite + Ts

npm install jest --save-dev - jest framework
npm install ts-jest @types/jest --save-dev - הורדת types לשילוב typescript + jest

לאחר מכן נוסיף תקייה בשם test לתקיית הsrc של הפרוייקט בצורה הבאה:

עכשיו במצב הנתון נוכל להפעיל כבר את jest עם טסטים פשוטים.

טסטים על קומפוננטות React

npm install --save-dev @testing-library/react @testing-library/dom - לרנדר קומפוננטות בריאקט
npm install @testing-library/jest-dom --save-dev - מוסיף Matchers כדי להרחיב פונקציונליות בטסטים
npm install jest-environment-jsdom - מדמה לנו התנהגות של סביבת דפדפן
npm install identity-obj-proxy --save-dev - כדי להוסיף קונפגיורציה שjest יתעלם מCSS .
npm install --save-dev babel-jest @babel/preset-react @babel/preset-env - כדי לקמפל את הקוד לפורמט המתאים.

עכשיו נתאים את הקובץ config של Jest כמו בתמונה למטה.

export default {
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      '<rootDir>/__mocks__/fileMock.js',
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};

נתאים את הקובץ Babel שיקמפל לנו את הקוד לפורמט המתאים.

{
  "presets": [
    "@babel/preset-env",
    [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
  ]
}

טסטים על קומפוננטות React + TS

npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom
npm install ts-node @testing-library/jest-dom --save-dev
npm install jest-environment-jsdom
npm install identity-obj-proxy --save-dev

• TypeScript משתמש כקומפיילר לכן לא נצטרך לייצר בעצמנו את הקונפגיורציה עם babel.

עכשיו נתאים את הקובץ config של Jest כמו בתמונה למטה.

export default {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    transform: {
      "^.+\\.(ts|tsx)?$": ["ts-jest"],
    },
    moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      '<rootDir>/__mocks__/fileMock.js',
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
        },
  };
  

עכשיו נתאים את הקובץ config של Jest כמו בתמונה למטה.

{
  "files": [],
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true
  },
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

😀עכשיו אתם יכולים להתחיל לייצר טסטים בריאקט!!

למטה תמונה של טסט פשוט על קומפוננטה בריאקט שמכילה Hooks קבצי CSS.