Modules और API Calls की Mocking
jest.mock() से ES modules को mock करें, MSW (Mock Service Worker) से fetch का stub बनाएँ और real network calls के बिना external data पर निर्भर components का test करें।
Modules और API Calls की Mocking, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मॉक क्यों बनाएँ?
यूनिट परीक्षण अलग-अलग होने चाहिए। वास्तविक API कॉल धीमी, अविश्वसनीय और महँगी होती हैं। मॉकिंग निर्भरताओं को नियंत्रित परीक्षण डबल से बदल देती है, जो पूर्वानुमेय प्रतिक्रियाएँ लौटाते हैं।
jest.mock() — पूरे मॉड्यूल का मॉक
jest.mock('module-path') पूरे मॉड्यूल को अपने-आप बनाए गए मॉक संस्करणों से बदल देता है। सभी एक्सपोर्ट jest.fn() स्टब बन जाते हैं। वापसी मान निर्धारित करने के लिए mockReturnValue या mockResolvedValue को कॉल करें।
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn() — मैनुअल स्टब
jest.fn() ऐसा मॉक फ़ंक्शन बनाता है, जिसे आप ट्रैक और नियंत्रित कर सकते हैं। यह कॉलबैक प्रॉप्स और सेवा निर्भरताओं के लिए उपयोगी है।
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });beforeEach में मॉक रीसेट करना
स्टेट के रिसाव को रोकने के लिए परीक्षणों के बीच मॉक रीसेट करें। beforeEach में jest.clearAllMocks() का उपयोग करें।
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW — Mock Service Worker
MSW, सर्विस वर्कर (ब्राउज़र) या Node.js इंटरसेप्टर (परीक्षण) का उपयोग करके नेटवर्क स्तर पर वास्तविक fetch/XHR कॉल को रोकता है। ऐसे अनुरोध हैंडलर लिखें जो नकली प्रतिक्रियाएँ लौटाएँ।
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());प्रति-परीक्षण MSW ओवरराइड
किसी विशिष्ट परीक्षण परिदृश्य के लिए डिफ़ॉल्ट हैंडलर को ओवरराइड करें।
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});localStorage का मॉक बनाना
localStorage का उपयोग करने वाले परीक्षणों में Web Storage की विधियों का मॉक बनाने के लिए jest.spyOn का उपयोग करें।
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});टाइमरों का मॉक बनाना
jest.useFakeTimers(), setTimeout/setInterval को Jest द्वारा नियंत्रित संस्करणों से बदल देता है। jest.runAllTimers() सभी टाइमरों को तेज़ी से आगे बढ़ा देता है।
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());मॉड्यूल फ़ैक्टरी पैटर्न
TypeScript में, मॉक मॉड्यूल फ़ैक्टरियाँ सही प्रकार लौटाती हैं।
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));स्नैपशॉट परीक्षण — सीमित रूप से उपयोग करें
स्नैपशॉट परीक्षण किसी घटक के परिणाम का क्रमबद्ध निरूपण सहेजते हैं और उसमें बदलाव होने पर विफल हो जाते हैं। इन्हें बनाना आसान है, लेकिन ये शोरपूर्ण झूठे सकारात्मक परिणाम दे सकते हैं। इनका उपयोग केवल स्थिर, शुद्ध प्रस्तुतीकरण वाले घटकों के लिए करें।
त्वरित जाँच
एपीआई का मॉक बनाने के लिए jest.mock('fetch') की तुलना में MSW का मुख्य लाभ क्या है?
पुनरावलोकन: मॉक बनाना
jest.mock() मॉड्यूल बदल देता है। jest.fn() ऐसे स्टब बनाता है जिनकी गतिविधि पर नज़र रखी जा सकती है। beforeEach में मॉक रीसेट करें। MSW नेटवर्क स्तर पर HTTP अनुरोधों को रोकता है — यह मॉक बनाने का सबसे वास्तविक तरीका है। त्रुटि की स्थितियों के लिए प्रत्येक परीक्षण में server.use() से ओवरराइड करें। समय पर निर्भर कोड के लिए नकली टाइमर उपयोग करें। घटक एकीकरण परीक्षणों के लिए MSW को प्राथमिकता दें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Modules और API Calls की Mocking” पाठ निःशुल्क है?
हाँ—“Modules और API Calls की Mocking” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Modules और API Calls की Mocking” में मैं क्या सीखूँगा?
jest.mock() से ES modules को mock करें, MSW (Mock Service Worker) से fetch का stub बनाएँ और real network calls के बिना external data पर निर्भर components का test करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Modules और API Calls की Mocking” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Jest Setup और Basic Tests
- @testing-library/react: render, userEvent
- @testing-library/vue: components mount करना
- Modules और API Calls की Mocking