التطوير والاختبار

Mock Service Worker (MSW)

اعتراض طلبات الشبكة على مستوى الـ Service Worker لمحاكاة API بشكل سلس في الاختبارات والتطوير.

Claude Code Codex Copilot Cursor Gemini CLI Windsurf

نظرة عامة

Mock Service Worker (MSW) يعترض طلبات HTTP على مستوى الشبكة باستخدام Service Worker في المتصفح ومعترض طلبات في Node.js. على عكس محاكاة fetch أو axios مباشرة، يعمل MSW مع أي عميل HTTP ويوفر سلوك شبكة واقعي بما في ذلك التأخيرات والأخطاء والاستجابات المتدفقة. يستطيع وكيل الذكاء الاصطناعي تعريف معالجات تتطابق مع عقود API الفعلية الخاصة بك.

يمكن لوكيل الذكاء الاصطناعي كتابة معالجات الطلبات باستخدام واجهة MSW البديهية: http.get و http.post وطرق أخرى تعكس نقاط نهاية REST أو عمليات GraphQL. تعيد المعالجات استجابات محاكاة يستهلكها مكوناتك تماماً كما تستهلك استجابات API الحقيقية. هذا يعني أن اختباراتك وبيئة التطوير تستخدم نفس الكود، فقط بمصادر بيانات مختلفة.

MSW قوي بشكل خاص للاختبار لأنه لا يتطلب أي تغييرات في كود تطبيقك. يمكن لوكيل الذكاء الاصطناعي إعداد معالجات للمسارات السعيدة وحالات الخطأ وحالات التحميل والحالات الحدية. يمكنه تهيئة MSW لكل من قصص Storybook في المتصفح واختبارات Jest/Vitest في Node.js، مما يوفر استراتيجية محاكاة موحدة عبر مجموعة اختباراتك بالكامل.

لمن هذه الأداة؟

مطوري الـ Frontend اللي بيحاكوا استجابات API أثناء التطوير من غير backend
مهندسي الاختبار اللي بيعملوا سيناريوهات شبكة واقعية لاختبارات التكامل
الفرق اللي بتختبر معالجة الأخطاء عبر محاكاة أعطال الخادم والتأخيرات
مستخدمي Storybook اللي بيحاكوا تبعيات API لقصص المكونات

التثبيت

إعداد Claude Code

npm install -D msw
npx msw init public/
Claude Code generates request handlers and test setups

الإعدادات

// src/mocks/handlers.ts
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/users", () => {
    return HttpResponse.json([
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
    ]);
  }),
  http.post("/api/login", async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ token: "mock-jwt-token" });
  }),
];

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

التطوير والاختبار

Linear MCP Server

إدارة المهام والتذاكر في Linear مباشرة من وكيل البرمجة بدون مغادرة المحرر.

Claude Code Cursor Windsurf

التطوير والاختبار

Playwright MCP

أتمتة اختبارات المتصفح والتفاعل مع صفحات الويب برمجيًا للتحقق من الواجهات.

Claude Code Cursor Copilot

التطوير والاختبار

Jest Test Runner

تشغيل وتصحيح اختبارات الوحدة والتكامل تلقائيًا مع تحليل نتائج الأخطاء.

Claude Code Copilot Cursor