שלום אורח התחבר

ספריית msw היא כל מה שהיה אפשר לרצות מספריית Mock ב JavaScript ואז עוד קצת

נושאים:יומי

לאחרונה גיליתי את ספריית msw שהפכה תוך רגע לספריית ה Mock האהובה עליי, ואני בכלל לא אוהב להשתמש ב Mock. אני רוצה לשתף כאן דוגמה קצרה לספריה ודרך זה לראות מה כל כך מלהיב בה.

1קודם כל קוד

לפני msw כשהיינו צריכים לבדוק קומפוננטה שפונה לשרת היו לנו 4 אפשרויות:

  1. היינו יכולים לשנות את קוד הקומפוננטה (כן ב JavaScript אפשר לעשות הרבה מהדברים האלה מבחוץ ומתוך קוד הבדיקה) כדי שלא באמת תפנה לשרת אלא תשתמש במידע פיקטיבי שכאילו התקבל מהשרת.

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

  3. היינו יכולים להשתמש בשרת האמיתי ולהקים סביבת בדיקות שבדיקות אוטומטיות יעבדו מולה.

  4. היינו יכולים לוותר על בדיקת התקשורת ולבדוק רק את החלקים שמציגים מידע.

שיטה (1) מסורבלת במקרה הטוב ולא ישימה במקרה הגרוע. שיטה (2) קשה לתחזוקה ותפעול, שיטה (3) נפלאה לסביבת אינטגרציה אבל לא ממש מתאימה ל TDD כי לא תמיד אפשר לגרום לשרת האמיתי להחזיר בדיוק את המידע שאתה צריך ושיטה (4) מרגישה כמו החמצה.

ספריית msw מציעה גישה פשוטה יותר בה קוד Low Level בסביבת הריצה דורס את פונקציות התקשורת ומחזיר תשובות פיקטיביות:

import { rest } from 'msw'
import { setupServer } from 'msw/node'

const server = setupServer(

  // Describe the requests to mock.
  rest.get('/book/:bookId', (req, res, ctx) => {
    return res(
      ctx.json({
        title: 'Lord of the Rings',
        author: 'J. R. R. Tolkien',
      }),
    )
  }),
)

beforeAll(() => {server.listen()})

afterAll(() => {server.close()})

test('renders a book data', () => {

  // Render components, perform requests, API communication is covered.

})

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

2למה זה מלהיב

היתרונות המרכזיים בגישה של msw הם:

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

  2. התחזוקה מאוד פשוטה כי כל הגדרות ה Mock Data נכתבות בקובץ הבדיקות יחד עם קוד הבדיקה, ואין בעיה לשלב מספר "שרתים" פיקטיביים בתוכנית בדיקות, אחד לכל קובץ בדיקות.

  3. אין תקשורת אמיתית ברשת. אין בעיה של Firewalls ולא צריך לפתוח פורטים.

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

  5. מבנה הנתיבים עם הנקודותיים והפרמטרים מתאים למה שאנחנו מכירים מ Express.

  6. יש תמיכה מלאה ב REST וב GraphQL

  7. הכל רץ ב Node.JS באמצעות ספריה בשם node-request-interceptor או בדפדפן באמצעות Service Worker. בריצה בדפדפן צריך להפעיל פונקציית איתחול אחרת שנקראת setupWorker.

הספריה מאוד פשוטה לשימוש וכבר חסכה לי הרבה קוד Mock בכמה מקומות. שווה לבדוק פרטים ולראות אם היא תעזור גם לכם בדף הבית בקישור: https://mswjs.io/.

מעדיפים לקרוא מהטלגרם? בקרו אותנו ב:@tocodeil

או הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:


נהניתם מהפוסט? מוזמנים לשתף ולהגיב