בדיקות אוטומטיות בריאקט

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

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

ריאקט עובדת בצורה הטובה ביותר עם פריימוורק + ראנר של בדיקות שנקרא Jest. מדובר גם בפריימוורק (מבוסס Jasmine, שהתבססה והפכה בת׳כלס לסטנדרט של בדיקות יחידה בג׳אווהסקריפט) וגם בראנר שמריץ את הבדיקות. בניגוד ל-runners אחרים, הוא משתמש ב-JSDOM והוא ממש מהיר. במאמר הזה אנו נלמד לכתוב בדיקות בסיסיות ובמאמר הבא נלמד לדבג אותן.

create react app, שעליה למדנו באחד המאמרים הקודמים, באה כבר עם Jest. כך שלא צריך להגדיר אותו (גם ככה ההגדרה שלו קלה) ואפילו עם בדיקה אחת כדוגמה. במאמר של create react app הסברתי איך מכניסים קומפוננטה. הקומפוננטה שבחרתי להכניס היא פשוטה ביותר, אפילו מגוחכת:

import React from 'react';

class MyComponent extends React.Component {
  render() {
      return <p>Hello world!</p>
  }
}

export default MyComponent;

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

import React from 'react';

const MyComponent = () => (
  <p>Hello world!</p>
);

export default MyComponent;

כך או כך, צריך לבדוק אותה. איך כותבים לה קובץ בדיקות? ראשית יוצרים בתיקיה שבה יצרנו את הקומפוננטה קובץ בשם של הקומפוננטה אך עם סיומת spec.js או test.js. אם יצרנו קומפוננטה בשם src/components/MyComponent/MyComponent.jsx, אז באותה תיקיה ניצור את קובץ הבדיקות src/components/MyComponent/MyComponent.spec.js

ומה יהיה בו? תמיד שתי השורות:

import React from 'react';
import ReactDOM from 'react-dom';

ואז את הבדיקה עצמה שבה אני קורא ל-MyComponent ובודק אם היא מתרנדרת ומחזירה לי את התוצאה שאני רוצה:

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<MyComponent />, div);
  expect(div.innerHTML).toEqual('<p>Hello world!</p>');
});

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

  expect(div.innerHTML).toEqual('<p>Hello world!</p>');

מה הולך פה? זה בדיוק כפי שזה נראה. אני מצפה שה-InnerHTML של ה-div יכיל את מה שהקומפוננטה מוציאה. פשוט, לא? מאיפה ה-toEqual? מי שמכיר את Jasmine כבר יודע. ומי שלא? יש את ה-API של Jest שמסביר את הכל. גם על toEqual.

איך מריצים את הבדיקה? באמצעות הפקודה npm t בקונסולה (או ב-CMD אם אתם משתמשים בחלונות)

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

⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי.