إذا كنت تكتب اختبارات الواجهة الأمامية، فمن المحتمل أنك استخدمت Mock Service Worker (MSW). إنها المكتبة المفضلة لاعتراض الطلبات داخل المتصفح و Node، ويصعب التغلب عليها في اختبارات الوحدات والمكونات. يشرح هذا الدليل ما يفعله MSW بشكل جيد، وأين يتوقف عن التوسع، ومتى يكون نظام محاكاة API مستضاف أكثر منطقية.
ما هو Mock Service Worker؟
Mock Service Worker هي مكتبة JavaScript تعترض طلبات الشبكة من المصدر. في المتصفح، تسجل Service Worker يلتقط مكالمات fetch و XMLHttpRequest الصادرة. في Node، تقوم بتصحيح طبقة الطلب بحيث تعمل نفس المعالجات في Jest أو Vitest. يمكنك كتابة معالجات الطلبات التي تتطابق مع طريقة ومسار، ثم إرجاع أي استجابة تريدها.
التصميم ذكي. يستمر رمز التطبيق الخاص بك في استدعاء واجهات برمجة تطبيقات الشبكة الحقيقية. يجلس MSW في المنتصف ويرد، لذلك لا تحتاج إلى تهيئة fetch أو تبديل عميل HTTP الخاص بك. تعمل نفس تعريفات المحاكاة في الاختبارات وفي بناء التطوير الجاري، وهذا هو السبب في أن العديد من فرق React و Vue تستخدمه. يمكنك التعمق في مصدر MSW على GitHub لترى كيف تعمل طبقة الاعتراض.
يبدو المعالج النموذجي كما يلي:
import { http, HttpResponse } from 'msw'
export const handlers = [
http.get('/api/users/:id', ({ params }) => {
return HttpResponse.json({ id: params.id, name: 'Ada Lovelace' })
}),
]
هذا هو جاذبيته الكاملة. تعيش المحاكاة بجوار رمزك، ويتم التحكم في إصدارها مع اختباراتك، وتعمل أينما يعمل JavaScript الخاص بك.
أين يتألق MSW
يتناسب MSW بقوة عندما تعيش المحاكاة والمستهلك في نفس قاعدة الرمز. فيما يلي بعض الحالات التي يكون فيها الأداة المناسبة حقًا:
- اختبارات المكونات والوحدات. عرض مكون، دعه يطلق طلباته الحقيقية، وإرجاع بيانات جاهزة. لا توجد اختبارات مزدوجة لتوصيلها. إذا كنت تقارنه بالتجسس على العميل مباشرة، فانظر كيف يختلف هذا عن محاكاة Jest لاستدعاء API.
- تطوير الواجهة الأمامية المحلي. بناء واجهة المستخدم قبل وجود الواجهة الخلفية. تبديل المعالجات لمحاكاة حالات التحميل أو الأخطاء أو الحالات الفارغة عند الطلب.
- التكامل المستمر الحتمي (CI). لا تلمس الاختبارات خادمًا مباشرًا، لذلك لا تتأثر بظروف الشبكة أو بيانات التدريج المشتركة.
- لغة واحدة، فريق واحد. عندما يكون الأشخاص الذين يكتبون المحاكاة هم نفس الأشخاص الذين يستخدمونها، فإن الاحتفاظ بالمعالجات في المستودع هو المسار الأبسط.
إذا كان هذا يصف وضعك، فمن المحتمل أنك لا تحتاج إلى أي شيء آخر. MSW مجاني ومفتوح المصدر، ومصمم خصيصًا لهذا الغرض.
أين يبدأ MSW في التعثر
الشيء نفسه الذي يجعل MSW رائعًا في مستودع واحد، وهو وجود المحاكيات كرمز في هذا المستودع، هو ما يحد من استخدامه بمجرد مشاركة المزيد من الأشخاص. إليك الحالات التي تميل فيها الفرق إلى تجاوز استخدامه.
المستهلكون غير القائمين على JavaScript
معالجات MSW هي JavaScript. إذا كان فريقك المتخصص في تطبيقات الجوال يكتب بلغة Swift أو Kotlin، أو كانت اختبارات تكامل الواجهة الخلفية تعمل بلغة Go أو Python، فلا يمكنهم استيراد معالجاتك. سيحتاجون إلى محاكياتهم الخاصة، والتي قد تختلف عن محاكياتك. خادم محاكاة مستقل عن اللغة يتحدث HTTP عبر عنوان URL حقيقي يعمل مع كل عميل، بغض النظر عن اللغة.
محاكيات مشتركة ودائمة التشغيل
يعمل MSW داخل عملية. لا يوجد عنوان URL مشترك يمكن لمهندس ضمان الجودة أو مصمم أو فريق شريك الوصول إليه من أجهزتهم الخاصة. في اللحظة التي تريد فيها نقطة نهاية واحدة يستخدمها عدة أشخاص في وقت واحد، تحتاج إلى خادم محاكاة مستضاف بعنوان ثابت، وليس Service Worker مقيدًا بعلامة تبويب متصفح واحدة.
سير العمل الموجه بالتصميم أولاً والموجه بالمخطط
إذا قمت بتصميم واجهات برمجة التطبيقات (APIs) في OpenAPI قبل كتابة التعليمات البرمجية، فأنت تريد محاكيات يتم إنشاؤها من المواصفات تلقائيًا، حتى لا تتعارض المحاكاة مع العقد. يتوقع MSW منك كتابة المعالجات يدويًا. إن إنشاء المحاكيات مباشرة من مخطط هو نموذج مختلف. يمكنك قراءة المزيد حول هذا النهج في هذا الدليل حول محاكاة API والأنماط المحيطة بها.
بيانات واقعية وديناميكية على نطاق واسع
يعيد MSW ما يقوم به معالجك من تعليمات برمجية. للحصول على بيانات واقعية عبر العديد من الحقول، تكتب هذا المنطق بنفسك. توفر المنصات التي تدمج التوليد بأسلوب Faker واستنتاج أسماء الحقول استجابات واقعية دون الحاجة إلى كتابة كل واحدة يدويًا.
MSW مقابل منصة محاكاة API كاملة
إليك مقارنة صريحة جنبًا إلى جنب. لا يوجد عمود "أفضل" بشكل مجرد؛ فهما يحلان مشكلات مختلفة.
| القدرة | Mock Service Worker | منصة API مستضافة (مثل Apidog) |
|---|---|---|
| يعمل داخل اختبارات وحدة/مكون JS | نعم، أصلي | لا، إنها ليست مكتبة اختبار JS |
| مستقل عن اللغة عبر HTTP | لا (JS فقط) | نعم، أي عميل |
| عنوان URL مشترك للفريق بأكمله | لا | نعم، خادم محاكاة مستضاف |
| إنشاء محاكيات من OpenAPI | يدوي | تلقائي من المخطط |
| إنشاء بيانات ذكية/ديناميكية | مكتوب يدويًا | مدمج |
| موجود في مستودعك مع الاختبارات | نعم | مخزن في مشروع مشترك |
| التكلفة | مجاني، مفتوح المصدر | طبقة مجانية + خطط مدفوعة |
الخلاصة: MSW هو الخيار الصحيح لاختبارات الواجهة الأمامية والتطوير المحلي. منصة مثل Apidog هي الخيار الصحيح عندما يجب أن تكون المحاكاة مشتركة، محايدة اللغة، أو مدفوعة بمواصفات.
Apidog كعنصر مكمل، وليس بديلاً
للتوضيح، Apidog ليس بديلاً مباشرًا لـ MSW داخل Jest أو Vitest. إنها ليست مكتبة JavaScript تستوردها إلى ملف اختبار. تعامل معها كطبقة أعلى من اختبارات الوحدة الخاصة بك، المكان الذي تصبح فيه المحاكيات موردًا مشتركًا ومستقلاً عن اللغة للفريق بأكمله.
إليك ما يبدو عليه ذلك عمليًا. تقوم بتصميم أو استيراد API في Apidog، وتقوم بإنشاء نقطة نهاية محاكاة تلقائيًا من المخطط. تحصل المحاكاة على عنوان URL حقيقي يمكن لفريقك الأمامي، وفريق الجوال، وفريق ضمان الجودة استدعاؤه. يملأ Apidog الاستجابات ببيانات واقعية عن طريق الاستنتاج من أسماء الحقول، لذلك يعيد حقل يسمى email بريدًا إلكترونيًا ويعيد createdAt تاريخًا. يمكنك أيضًا كتابة قواعد مخصصة عندما تحتاج إلى استجابة 500 محددة أو حالة حدودية معينة.
نظرًا لأن المحاكاة تأتي من نفس المخطط مثل تصميمك واختباراتك، فإنها تظل متزامنة مع العقد. هذا هو الجزء الذي لا تستطيع المعالجات المكتوبة يدويًا ضمانه. إذا كنت تريد معرفة كيفية مقارنة إنشاء المحاكيات من المخططات عبر الأدوات، فإن هذا التجميع لأفضل أدوات محاكاة API يضع الخيارات جنبًا إلى جنب.
تقسيم عملي تعتمده العديد من الفرق:
- الاحتفاظ بـ MSW لاختبارات المكونات والوحدات داخل مستودع الواجهة الأمامية.
- استخدام محاكاة مستضافة للتكامل بين الفرق، والعروض التوضيحية، وأي مستهلك غير JS.
أنت لا تختار أحدهما. أنت تستخدم كل منهما حيث يناسب. قم بتنزيل Apidog إذا كنت ترغب في تجربة الجانب المستضاف جنبًا إلى جنب مع إعداد MSW الحالي الخاص بك.
بدائل MSW أخرى جديرة بالمعرفة
MSW ليست مكتبة المحاكاة الوحيدة، والمنصة ليست خيارك الوحيد. اعتمادًا على مكدسك التقني:
- Mockoon هو تطبيق سطح مكتب لإنشاء خوادم محاكاة محلية بسرعة، بواجهة مستخدم رسومية بدلاً من التعليمات البرمجية.
- WireMock هو خادم محاكاة يعتمد على Java، قوي لفرق JVM واختبار العقود.
- يُنشئ Prism من Stoplight محاكاة مباشرة من ملف OpenAPI عبر سطر الأوامر.
- يحول json-server ملف JSON إلى واجهة برمجة تطبيقات REST سريعة للنماذج الأولية.
كل منها يقدم شيئًا. WireMock و Prism يميلان نحو عمل الواجهة الخلفية والعقود؛ Mockoon و json-server يميلان نحو الإعداد المحلي السريع. إذا كانت مشكلتك هي تحديدًا "MSW لا يمكنه مساعدة زملائي غير المتخصصين في JS"، فإن أي خادم محاكاة قائم على HTTP يحلها. للحصول على زاوية أوسع للواجهة الأمامية، انظر كيف تتعامل الفرق مع محاكاة واجهات برمجة التطبيقات في React باستخدام Axios.
الأسئلة المتكررة
هل MSW مجاني؟
نعم. Mock Service Worker هو مشروع مفتوح المصدر بموجب ترخيص MIT ومجاني للاستخدام في أي مشروع، تجاري أو غير تجاري. تبدأ بالدفع فقط عندما تنتقل إلى منصة مستضافة للمحاكيات المشتركة، وتتضمن أدوات مثل Apidog طبقة مجانية لذلك أيضًا.
هل يمكن لـ Apidog أن يحل محل MSW في اختبارات الوحدات الخاصة بي؟
لا، ولا يجب أن تحاول ذلك. يعترض MSW الطلبات داخل برنامج تشغيل اختبار JavaScript الخاص بك. Apidog عبارة عن منصة مستضافة، وليست مكتبة قابلة للاستيراد، لذلك لا يمكنها العمل داخل Jest أو Vitest بالطريقة التي يعمل بها MSW. استخدم Apidog للمحاكيات المشتركة، أو عبر الفرق، أو المستندة إلى المخطط بدلاً من ذلك. إذا كنت تركز فقط على جانب برنامج تشغيل الاختبار، فإن هذا الشرح حول كيفية محاكاة استدعاءات API يغطي الأساليب داخل التعليمات البرمجية.
هل يعمل MSW في Node، أم في المتصفح فقط؟
كلاهما. في المتصفح، يستخدم MSW عامل خدمة (Service Worker). في Node، يقوم بتصحيح طبقة الطلب بحيث تعمل نفس المعالجات في Jest أو Vitest أو أي بيئة اختبار Node. هذا الوضع المزدوج هو أحد أكبر نقاط قوته لفرق JS كاملة المكدس.
متى يجب أن أنتقل من MSW إلى خادم محاكاة مستضاف؟
انتقل، أو بالأحرى أضف واحدًا، عندما تحتاج المحاكاة إلى المشاركة. الإشارات الأكثر وضوحًا: يحتاجها عميل غير JavaScript، يحتاج عدة أشخاص إلى نفس عنوان URL المستقر، أو تقوم بتصميم واجهات برمجة التطبيقات بناءً على المواصفات أولاً وتريد إنشاء المحاكيات من OpenAPI تلقائيًا.
الخاتمة
يُعد MSW ممتازًا فيما صُمم من أجله: اعتراض الطلبات داخل JavaScript لاختبارات الواجهة الأمامية والوحدات. لا يحاول أن يكون محاكاة مشتركة أو مستضافة أو مستقلة عن اللغة، وهذا أمر جيد. عندما تحتاج محاكياتك إلى مغادرة المستودع، أو عندما تحتاجها لغات أخرى أو فرق أخرى، أو عندما تريد إنشائها من مواصفات، فهذه هي اللحظة لإضافة منصة كاملة بجانبها.
يتعامل Apidog مع الجانب المشترك والموجه بالمخططات: خادم محاكاة مستضاف بعنوان URL حقيقي، ومحاكيات تلقائية من تصميم OpenAPI الخاص بك، وبيانات واقعية جاهزة. حافظ على MSW حيث يكون قويًا، ودع Apidog يغطي كل شيء يتجاوز حدود برنامج تشغيل الاختبار الخاص بك. قم بتنزيل Apidog ووجه واجهتك الأمامية إلى محاكاة مشتركة لترى الفرق.