לאחרונה גיליתי את ספריית 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/.