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

למאמר הקודם בסדרה על ריאקט

חלק משמעותי בפיתוח מקצועי הוא בכתיבת בדיקות אוטומטיות. למה צריך בדיקות אוטומטיות? כי בדיקות כאלו הן חלק משמעותי מתהליך שנקרא 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 אם אתם משתמשים בחלונות)

הרצה של npm t ובדיקה של בדיקות היחידה

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (9 הצבעות, ממוצע: 4.22 מתוך 5)

תגיות: פורסם בקטגוריה: ריאקט

יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

3 comments on “בדיקות אוטומטיות בריאקט
  1. אודי הגיב:

    תודה על המאמר! שאלה קטנה:
    בהרצה ב-node, מאיפה יש לתוכנה את document, ע”מ לקרוא ל-document.createElement()? לא צריך לייבא ספרייה מתאימה לשם כך?

  2. שלמה הגיב:

    אודי אתה שואל שאלה מצויינת, איך שאתה יכול לראות בלינק למטה, הבדיקות ב create-react-app, נעשות בעזרת jest, הן רצות ע”י Node ומה שאתה רואה אובייקטים של דפדפן, או לדוגמא ה- (ReactDOM.render(, div, הינן אובייקטי דמה לצורך בדיקה בלבד, שאלה מצויינת מראה על כך שאתה מבין איך השפה עובדת, הרבה אצלחה.

    https://facebook.github.io/create-react-app/docs/running-tests

  3. גלעד הגיב:

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

כתיבת תגובה

האימייל לא יוצג באתר.

רישום