חלק משמעותי בפיתוח מקצועי הוא כתיבת בדיקות אוטומטיות. למה צריך בדיקות אוטומטיות? כי בדיקות כאלו הן חלק משמעותי מתהליך שנקרא ,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 או איך מבצעים דיבאגינג. זה הרבה יותר קל ממה שאתם חושבים. אבל אם אתם לא מכירים בדיקות אוטומטיות ולא התנסיתם – נסו עכשיו ותראו בעצמכם כמה זה פשוט!
מאת: רן בר זיק, מתכנת ובלוגר
?DevOps רוצים להתעדכן בתכנים נוספים בנושאי
הירשמו עכשיו לניוזלטר שלנו ותמיד תישארו בעניינים > להרשמה
חלק משמעותי בפיתוח מקצועי הוא כתיבת בדיקות אוטומטיות. למה צריך בדיקות אוטומטיות? כי בדיקות כאלו הן חלק משמעותי מתהליך שנקרא ,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 או איך מבצעים דיבאגינג. זה הרבה יותר קל ממה שאתם חושבים. אבל אם אתם לא מכירים בדיקות אוטומטיות ולא התנסיתם – נסו עכשיו ותראו בעצמכם כמה זה פשוט!
מאת: רן בר זיק, מתכנת ובלוגר
?DevOps רוצים להתעדכן בתכנים נוספים בנושאי
הירשמו עכשיו לניוזלטר שלנו ותמיד תישארו בעניינים > להרשמה
לפרטים נוספים ויצירת קשר עם נציג אורקל
הודעתך לא התקבלה - נסה שוב מאוחר יותר