Vue Academy · पाठ

कंपोज़ेबल, स्टोर और API का मॉक बनाना

vi.mock(), useFetch का मॉक, Pinia स्टोर का मॉक और परीक्षणों में राउटर का मॉक

पाठ 4, कुल 4 में से13 चरण

कंपोज़ेबल, स्टोर और API का मॉक बनाना, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

मॉक क्यों करें?

यूनिट परीक्षणों को परीक्षणाधीन घटक को अलग रखकर चलना चाहिए। वास्तविक नेटवर्क अनुरोध, वास्तविक स्टोर और भारी कंपोज़ेबल परीक्षणों को धीमा और अस्थिर बना देते हैं। मॉकिंग इन निर्भरताओं को नियंत्रित किए जा सकने वाले नकली विकल्पों से बदल देती है।

vi.fn: एक मॉक फ़ंक्शन

vi.fn() एक ऐसी फ़ंक्शन बनाता है जिसका अभिलेख रखा जाता है। आप देख सकते हैं कि उसे कैसे बुलाया गया और वह क्या लौटाता है, इसे नियंत्रित कर सकते हैं। यह सभी मॉकिंग का मूल आधार है।

import { vi } from "vitest"

const onSave = vi.fn()
onSave("draft")
expect(onSave).toHaveBeenCalledWith("draft")
expect(onSave).toHaveBeenCalledTimes(1)

वापसी मान सेट करना

mockReturnValue (सिंक्रोनस) या mockResolvedValue (एसिंक्रोनस कोड के लिए हल किया गया प्रॉमिस) से मॉक के आउटपुट को नियंत्रित करें।

const getId = vi.fn().mockReturnValue(42)
expect(getId()).toBe(42)

const fetchUser = vi.fn().mockResolvedValue({ name: "Ada" })
// await fetchUser() => { name: "Ada" }

कंपोज़ेबल मॉड्यूल को मॉक करना

vi.mock(path) पूरे मॉड्यूल को बदल देता है। नकली निर्यात लौटाने वाली फ़ैक्टरी दें। इसका उपयोग किसी कंपोज़ेबल को स्टब करने के लिए करें, ताकि घटक को पूर्वानुमेय डेटा मिले।

import { vi } from "vitest"

vi.mock("@/composables/useUser", () => ({
  useUser: () => ({
    user: { value: { name: "Ada" } },
    isLoading: { value: false },
  }),
}))

vi.mock को ऊपर ले जाना

vi.mock कॉल को इम्पोर्ट चलने से पहले फ़ाइल के शीर्ष पर ले जाया जाता है। इसी कारण फ़ैक्टरी बाद में परिभाषित बाहरी वेरिएबल का संदर्भ नहीं दे सकती — किसी भी सहायक को फ़ैक्टरी के अंदर या vi.hoisted के माध्यम से घोषित करें।

// This runs before imports regardless of position.
vi.mock("@/api", () => ({ getPosts: vi.fn() }))

import { getPosts } from "@/api" // already the mock

Pinia स्टोर का परीक्षण

Pinia स्टोर का उपयोग करने वाले घटकों को परीक्षणों में एक स्टोर की आवश्यकता होती है। @pinia/testing का createTestingPinia आपको ऐसा स्टोर देता है जिसकी क्रियाएँ डिफ़ॉल्ट रूप से मॉक की जाती हैं।

// terminal: npm install -D @pinia/testing
import { createTestingPinia } from "@pinia/testing"

टेस्टिंग Pinia इंस्टॉल करना

माउंट करते समय टेस्टिंग Pinia को वैश्विक plugins विकल्प के माध्यम से पास करें। आप प्रारंभिक स्थिति भी तय कर सकते हैं।

import { mount } from "@vue/test-utils"
import { createTestingPinia } from "@pinia/testing"

const wrapper = mount(Profile, {
  global: {
    plugins: [createTestingPinia({
      initialState: { user: { name: "Ada" } },
    })],
  },
})

स्टोर की क्रियाओं पर दावे करना

डिफ़ॉल्ट रूप से क्रियाएँ स्टब की जाती हैं, चलाई नहीं जातीं, ताकि आप यह दावा कर सकें कि उन्हें भेजा गया था। स्टोर प्राप्त करें और स्पाई की जाँच करें।

import { useUserStore } from "@/stores/user"

const store = useUserStore()
await wrapper.get("button.logout").trigger("click")
expect(store.logout).toHaveBeenCalled()

fetch पर स्पाई करना

पूरे मॉड्यूल को बदलने के बजाय, आप किसी वैश्विक फ़ंक्शन पर स्पाई कर सकते हैं। vi.spyOn(global, "fetch") वास्तविक fetch को रैप करता है, ताकि आप उसे ओवरराइड कर सकें और उसकी जाँच कर सकें।

const spy = vi.spyOn(global, "fetch").mockResolvedValue({
  ok: true,
  json: async () => ({ items: [1, 2, 3] }),
})

एक पूर्ण fetch परीक्षण

fetch को मॉक करें, क्रिया को ट्रिगर करें, प्रॉमिस को पूरा होने दें, रेंडर किए गए डेटा पर दावा करें और जाँचें कि fetch को सही URL के साथ बुलाया गया था।

it("loads items", async () => {
  vi.spyOn(global, "fetch").mockResolvedValue({
    ok: true,
    json: async () => ({ items: ["a", "b"] }),
  })
  const wrapper = mount(List)
  await flushPromises()
  expect(global.fetch).toHaveBeenCalledWith("/api/items")
  expect(wrapper.findAll("li")).toHaveLength(2)
})

परीक्षणों के बीच मॉक रीसेट करना

साझा मॉक कॉल का इतिहास जमा करते रहते हैं। उन्हें beforeEach में रीसेट करें, या कॉन्फ़िगरेशन में clearMocks सक्षम करें, ताकि एक परीक्षण दूसरे में न फैल जाए।

import { beforeEach, vi } from "vitest"

beforeEach(() => {
  vi.clearAllMocks()
})

त्वरित जाँच

मॉकिंग की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने परीक्षणों में निर्भरताओं को मॉक करना सीखा:

vi.fn() ऐसी फ़ंक्शन बनाता है जिनका अभिलेख रखा जाता है; mockReturnValue / mockResolvedValue से आउटपुट नियंत्रित करें।
vi.mock(path, factory) किसी मॉड्यूल को बदल देता है, जैसे किसी कंपोज़ेबल को; इसे इम्पोर्ट से पहले ऊपर ले जाया जाता है।
@pinia/testing का createTestingPinia स्टब की गई क्रियाओं वाला स्टोर देता है, जिन पर आप दावे कर सकते हैं।
vi.spyOn(global, "fetch").mockResolvedValue(...) नेटवर्क अनुरोधों का नकली रूप तैयार करता है।
परीक्षणों के बीच vi.clearAllMocks() से मॉक रीसेट करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “कंपोज़ेबल, स्टोर और API का मॉक बनाना” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कंपोज़ेबल, स्टोर और API का मॉक बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कंपोज़ेबल, स्टोर और API का मॉक बनाना” में मैं क्या सीखूँगा?

vi.mock(), useFetch का मॉक, Pinia स्टोर का मॉक और परीक्षणों में राउटर का मॉक आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“कंपोज़ेबल, स्टोर और API का मॉक बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Vue प्रोजेक्ट के लिए Vitest सेटअप
कंपोनेंट माउंट करना और क्वेरी करना
उपयोगकर्ता इंटरैक्शन और इवेंट का परीक्षण
कंपोज़ेबल, स्टोर और API का मॉक बनाना

← Vue Academy पर वापस जाएँ