Connect with us

קטגוריות

React

כתיבת בדיקות ב-React בעזרת Jest ו-Enzyme

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

 בכל אופן בואו נסכים שבדיקות הן דבר חשוב.

במאמר הזה אנחנו נכיר את Jest ואת Enzyme שיעזרו לנו לכתוב בדיקות שונות לקומפוננטות שכתבנו ב-React ולהריץ את הבדיקות בסביבה כיפית וגמישה.

Jest

Jest is used by Facebook to test all JavaScript code including React applications.

סיפריית Jest פותחה על ידי פייסבוק והיא משמשת ל:

  • להריץ בדיקות (test runner),
  • סיפריית assertion
  • סיפריית mocking.

Jest מגיעה עם בדיקה מיוחדת שיכולה לעזור לנו במקרים מסויימים קוראים לזה בדיקת Snapshot.

בדיקת Snapshot היא בדיקה שמבצעת צילום של הקוד ומשווה אותו לצילום של הבדיקה הקודמת, אם הקוד בשני הצילומים האלה לא שווה -> הבדיקת נכשלת. בדיקות ה-Snapshot ישמרו בספרייה __snapshots__ שתיווצר אוטומטית.

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

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.codehub.co.il"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Codehub
</a>
`;

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.

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

התקנה

על מנת שנוכל להתחיל לרשום בדיקות אתם יכולים להתקין את create-react-app (אם אתם לא יודעים במה מדובר, לחצו כאן להסבר).

create-react-app מגיעה עם Jest, מה שנשאר לנו להתקין זה את enzyme, enzyme-adapter-react-16 ואת enzyme-to-json, התקינו את שלושת החבילות על ידי npm באופן הבא:

npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json

הוסיפו לקובץ ה-package.json שלכם את הקונפיגורציה הבאה:

"jest": {
  "snapshotSerializers": ["enzyme-to-json/serializer"]
}

צרו קובץ בשם setupTests.js בתוך תקיית ה-src של הפרויקט שמכיל את הקוד הבא:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

 create-react-app תאיץ בצורה אוטומטית את הקובץ setupTests.js שהוא מהווה קובץ קונפיגורציה.

יצירת קובץ בדיקות

jest תחפש את קבצי הבדיקות שלנו לפי הווריאציות הבאות:

  • קבצי Javascript שנמצאים בתוך תקייה ששמה __tests__
  • קבצי Javascript עם הסיומת .test.js
  • קבצי Javascript עם הסיומת .spec.js

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

import MyComponent from '../../../../MyComponent';
VS
import MyComponent from './MyComponent';

כשאנחנו נריץ את הפקודה npm test משורת הפקודה, Jest תחפש את כל קבצי הבדיקות שלנו ותריץ אותם, את הפלט אנחנו נוכל לראות בחלון של שורת הפקודה.

על מנת להריץ/לא להריץ רק קבצים עם pattern מסויים אנחנו נוכל להדליק דגל בעת הרצת הבדיקות באופן הבא:

// הרץ את הקבצים עם ה-pattern הבא
--<testPathPattern=<regex

// אל תריץ את הקבצים עם ה-pattern הבא
--<testPathIgnorePatterns=<regex

זה שימושי מאחר ובדרך זו אנחנו יכולים להגיד ל-Jest להריץ רק בדיקות מסויימות, נניח בדיקות integration או לחילופין רק בדיקות unit.

Mount, Shallow ו-Render

import { mount, shallow, render } from ‘enzyme';

על מנת לבדוק את הקומפוננטות שכתבנו אנחנו צריכים לרנדר אותם, על מנת לרנדר את הקומפוננטות אנחנו נשתמש ב-Enzyme שמביאה לנו שלוש אפשרויות של רינדורים:

Mount

בעזרת פונקציית Mount אנחנו נוכל לרנדר את הקומפוננטה יחד עם התת קומפוננטות (child components) שנמצאות בתוכה, בנוסף, הפונקצייה Mount מאפשרת העברה של props לקומפוננטה (כולל default props) ו-props לתת קומפוננטות.

בנוסף, פונקציית Mount תסמלץ לנו את ה-DOM API על ידי שימוש ב- jsdom כך שנוכל לבדוק כם קומפוננטות שמבצעות אינטרקציה עם ה-DOM API או במיקרים בהם הקומפוננטה שלנו מבצעת שימוש בפונקציות ה-lifecycle של React.

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

Shallow

פונקציית Shallow תרנדר רק את הקומפוננטה שאותה העברנו מבלי לרנדר את התת קומפוננטות (child components) שנמצאות בתוכה, זה יאפשר לנו לבודד את הקומפוננטה על מנת לבצע בדיקת unit בצורה טובה יותר כך שאם יש שינוי או באג באחת מהתת קומפוננטות (child components) זה לא ישפיע על מהלך הבדיקה.

כשאנחנו מבצעים רינדור עם פונקציית Shallow אין אפשרות להשתמש ב-DOM API

מגירסה 3 של Enzym, ניתן להשתמש בפונקציות ה-lifecycle של React בעת רינדור עם Shallow.

Render

פונקציית Render מבצעת רינדור של הקומפוננטה וגם של התת-קומפוננטות (child components) ל-HTML סטטי וכאן אין לנו גישה לפונקציות ה-lifecycle של React.

איך כותבים בדיקות עם Jest ו-Enzym?

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

רינדור בסיסי של קומפוננטה

על מנת לרנדר קומפוננטות פשוטות ללא רינדור של התת קומפוננטות (child components), נוכל להשתמש בפונקציית shallow באופן הבא:

// בדיקת Snapshot
it('should render <App /> correctly with no props', () => {
  const app = shallow(<App />);
  expect(app).toMatchSnapshot();
});

it('should render <App /> correctly with props', () => {
  const arr = [1, 2, 3, 4];
  const app = shallow(<App things={arr} />);
  expect(app).toMatchSnapshot();
});

Events

ל-API של Enzyme יש כמה דרכים לסמלץ אירועים (events) כמו לחיצה על מקש, לחיצה על העכבר וכו׳, על מנת לבדוק את האירועים הללו נוכל להשתמש בפונקציית mount באופן הבא:

it('should be possible to change the input value', () => {
  const component = mount(<App />);

  component
  .find('input')
  .simulate('change', {
    target: { value: 'Hello codehub' }
  })

  expect(component).toMatchSnapshot();
  component.unmount();
});

פונקציות Mock

לפעמים אנחנו נרצה לבדוק אם הפונקצייה שהעברנו ב-props אכן נקראה, נוכל לבצע זאת בעזרת jest.fn באופן הבא:

describe('drinkAll', () => {
  test('drinks something lemon-flavored', () => {
    const drink = jest.fn();
    drinkAll(drink, 'lemon');
    expect(drink).toHaveBeenCalled();
  });

  test('does not drink something octopus-flavored', () => {
    const drink = jest.fn();
    drinkAll(drink, 'octopus');
    expect(drink).not.toHaveBeenCalled();
  });
});

לסיכום

ל-Jest ול-Enzyme יש עוד הרבה דברים להציע, במאמר זה למדנו על השימושים הבסיסיים עם jest ו-Enzyme ואני מקווה שהמאמר הזה גרם לכם לחשוב על להתחיל לרשום בדיקות (אם עדיין לא התחלתם), ובבדיקות תזכרו כלל חשוב.

כשכותבים בדיקות לא חשובה הכמות, אלא האיכות.

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

עוד ב React

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה