यह क्या है और क्यों ज़रूरी है?

Mock Service Worker (msw) एक लाइब्रेरी है जो Service Worker API के स्तर पर नेटवर्क रिक्वेस्ट को इंटरसेप्ट और मॉक करती है। पारंपरिक समाधानों (जैसे axios-mock-adapter या nock) के विपरीत, msw ब्राउज़र या Node.js स्तर पर काम करता है, वास्तविक HTTP रिक्वेस्ट को इंटरसेप्ट करके पहले से तय रिस्पॉन्स लौटाता है। इससे आप बिना रियल सर्वर चलाए या एप्लिकेशन कोड बदले ऐप टेस्ट कर सकते हैं।

msw का मुख्य उद्देश्य ब्राउज़र टेस्ट (रियल Service Worker के साथ) और सर्वर टेस्ट (Node.js) दोनों के लिए API मॉकिंग का एक ही टूल देना है। यह लाइब्रेरी TypeScript डेवलपर्स के लिए खासतौर पर उपयोगी है, क्योंकि यह सभी रिक्वेस्ट और रिस्पॉन्स के लिए सख्त टाइपिंग प्रदान करती है। msw यूनिट टेस्ट, इंटीग्रेशन टेस्ट और बैकएंड से अलग फ्रंटएंड डेवलपमेंट के लिए आदर्श है।

msw की सबसे बड़ी खासियत यह है कि मॉक नेटवर्क स्तर पर काम करते हैं, कोड स्तर पर नहीं। इसका मतलब है कि HTTP रिक्वेस्ट करने वाली कोई भी लाइब्रेरी (fetch, axios, graphql-request आदि) बिना अतिरिक्त सेटअप के अपने आप इंटरसेप्ट हो जाएगी। यह लाइब्रेरी REST API, GraphQL और एक्सटेंशन के ज़रिए WebSocket कनेक्शन को भी सपोर्ट करती है।

इंस्टॉलेशन

TypeScript प्रोजेक्ट में msw इंस्टॉल करने के लिए नीचे दिए गए कमांड में से कोई एक चलाएं:

# npm
npm install msw --save-dev

# yarn
yarn add msw --dev

# pnpm
pnpm add msw --save-dev

इंस्टॉल करने के बाद, ब्राउज़र में उपयोग के लिए Service Worker को इनिशियलाइज़ करें:

npx msw init public/ --save

सर्वर साइड (Node.js) उपयोग के लिए अतिरिक्त इनिशियलाइज़ेशन की ज़रूरत नहीं है।

त्वरित शुरुआत — न्यूनतम काम करने वाला उदाहरण

REST API के लिए एक सरल मॉक बनाते हैं। इसमें हैंडलर डिफ़ाइन करना, सर्वर सेटअप करना और टेस्ट रिक्वेस्ट शामिल है।

// handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('https://api.example.com/user', () => {
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3f',
      firstName: 'John',
      lastName: 'Maverick',
    });
  }),
];

// server.ts (Node.js के लिए)
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// test.ts
import { server } from './server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('यूज़र डेटा लाना चाहिए', async () => {
  const response = await fetch('https://api.example.com/user');
  const data = await response.json();
  expect(data.firstName).toBe('John');
});

मुख्य मेथड्स और फंक्शन

1. http.get()

सिग्नेचर: http.get(url: string | RegExp, resolver: (info: HttpRequestInfo) => HttpResponse)

विवरण: दिए गए URL पर GET रिक्वेस्ट के लिए हैंडलर बनाता है। यह सटीक स्ट्रिंग, रेगुलर एक्सप्रेशन और पैरामीटर वाले पैटर्न को सपोर्ट करता है।

import { http, HttpResponse } from 'msw';

export const handler = http.get('https://api.example.com/users/:id', ({ params }) => {
  const { id } = params;
  return HttpResponse.json({ id, name: 'यूज़र ' + id });
});

2. http.post()

सिग्नेचर: http.post(url: string | RegExp, resolver: (info: HttpRequestInfo) => HttpResponse)

विवरण: POST रिक्वेस्ट के लिए हैंडलर बनाता है। request.json() के ज़रिए रिक्वेस्ट बॉडी पढ़ सकते हैं।

import { http, HttpResponse } from 'msw';

export const handler = http.post('https://api.example.com/users', async ({ request }) => {
  const newUser = await request.json();
  return HttpResponse.json({ ...newUser, id: 'नया-आईडी' }, { status: 201 });
});