jQuery Academy · पाठ

टेस्टिंग परिवेश स्थापित करना

Jest या QUnit जैसे टूल का उपयोग करके टेस्टिंग परिवेश कॉन्फ़िगर करें और अपने jQuery फ़ंक्शन तथा प्लगइन के व्यवहार की जाँच के लिए अभिकथन स्थापित करें।

पाठ 2, कुल 3 में से12 चरण

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

अपने jQuery कोड का परीक्षण क्यों करें?

मज़बूत और आसानी से रखरखाव योग्य वेब एप्लिकेशन बनाने के लिए अपने jQuery कोड के परीक्षण लिखना बहुत महत्वपूर्ण है। इससे बग जल्दी पकड़ने में सहायता मिलती है और यह सुनिश्चित होता है कि आपका कोड अपेक्षा के अनुसार काम करे।

प्रतिगमन रोकता है: यह सुनिश्चित करता है कि नए बदलाव मौजूदा कार्यक्षमता को प्रभावित न करें।
कोड की गुणवत्ता सुधारता है: यह आपको मॉड्यूलर और परीक्षण योग्य कोड लिखने के लिए प्रेरित करता है।
सहयोग आसान बनाता है: यह घटकों के काम करने के तरीके का स्पष्ट दस्तावेज़ उपलब्ध कराता है।

परीक्षण रनर चुनना

jQuery सहित JavaScript का परीक्षण करने के लिए आपको एक परीक्षण रनर की आवश्यकता होती है। यह उपकरण आपके परीक्षण चलाता है और परिणामों की रिपोर्ट देता है।

दो लोकप्रिय विकल्प हैं:

जेस्ट: फ़ेसबुक का आधुनिक और सुविधाओं से भरपूर परीक्षण फ़्रेमवर्क, जिसका उपयोग React के लिए व्यापक रूप से किया जाता है, लेकिन यह किसी भी JS के लिए उपयोगी है।
क्यूयूनिट: jQuery के लिए विशेष रूप से बनाया गया परीक्षण फ़्रेमवर्क, जो जेस्ट से सरल लेकिन कम सुविधाओं वाला है।

इस पाठ में हम जेस्ट को सेट अप करने पर ध्यान देंगे, क्योंकि इसमें व्यापक सुविधाएँ हैं और इसका उपयोग बहुत अधिक होता है।

अपना प्रोजेक्ट शुरू करें (Node.js)

जेस्ट इंस्टॉल करने से पहले आपके पास Node.js प्रोजेक्ट होना चाहिए। यदि आपके पास ऐसा प्रोजेक्ट नहीं है, तो आप इसे आसानी से बना सकते हैं।

टर्मिनल में अपने प्रोजेक्ट की डायरेक्टरी पर जाएँ और यह कमांड चलाएँ:

npm init -y

यह कमांड package.json फ़ाइल बनाती है, जो आपके प्रोजेक्ट की निर्भरताओं और स्क्रिप्ट का प्रबंधन करती है।

जेस्ट और JSDOM इंस्टॉल करें

अब जेस्ट इंस्टॉल करते हैं। चूँकि jQuery अक्सर ब्राउज़र के DOM (Document Object Model) के साथ काम करता है, इसलिए हमें jest-environment-jsdom की भी आवश्यकता होगी। JSDOM Node.js में ब्राउज़र जैसा वातावरण उपलब्ध कराता है, जिससे आपका jQuery कोड वर्चुअल DOM में बदलाव कर सकता है।

इन्हें विकास संबंधी निर्भरताओं के रूप में इंस्टॉल करें:

npm install --save-dev jest jest-environment-jsdom

इससे जेस्ट और JSDOM आपके package.json में जुड़ जाते हैं।

JSDOM के लिए जेस्ट कॉन्फ़िगर करें

जेस्ट को JSDOM का उपयोग करने के लिए बताने हेतु आपको उसका कॉन्फ़िगरेशन करना होगा। आप अपने package.json में test स्क्रिप्ट जोड़कर या jest.config.js फ़ाइल बनाकर ऐसा कर सकते हैं।

विकल्प 1: package.json में

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

--env=jsdom फ़्लैग यह सुनिश्चित करता है कि जेस्ट परीक्षण JSDOM वातावरण में चलाए।

अपनी पहली परीक्षण फ़ाइल

जेस्ट __tests__ डायरेक्टरी में या .test.js (या .spec.js) पर समाप्त होने वाली फ़ाइलों में परीक्षण खोजता है। आइए एक सरल परीक्षण फ़ाइल बनाएँ।

अपने प्रोजेक्ट के रूट में __tests__ नाम की डायरेक्टरी बनाएँ, फिर उसमें __tests__/my-feature.test.js जैसी फ़ाइल जोड़ें:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe संबंधित परीक्षणों को समूहित करता है और test (या it) किसी एक परीक्षण मामले को परिभाषित करता है।

परीक्षणों के लिए jQuery इम्पोर्ट करना

jQuery कोड का परीक्षण करने के लिए आपको jQuery को अपनी परीक्षण फ़ाइल में इम्पोर्ट करना होगा। आप npm के ज़रिए jQuery इंस्टॉल कर सकते हैं: npm install jquery।

इसके बाद अपनी परीक्षण फ़ाइल में इसे इम्पोर्ट करें:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = 'Hello';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

मूल अभिकथन लिखना

अभिकथन आपके कोड के सही ढंग से काम करने का सत्यापन करने का तरीका हैं। जेस्ट अभिकथन बनाने के लिए expect() फ़ंक्शन को मिलानकर्ताओं के साथ उपयोग करता है।

यहाँ एक सरल JavaScript उदाहरण है (यह jQuery-विशिष्ट नहीं है, लेकिन अभिकथनों को समझाता है):

function addNumbers(a, b) {
  return a + b;
}

// Example of how Jest would test this:
// expect(addNumbers(2, 3)).toBe(5);
// expect(addNumbers(-1, 1)).toBe(0);

console.log("2 + 3 = " + addNumbers(2, 3));
console.log("5 + 10 = " + addNumbers(5, 10));

जेस्ट के सामान्य मिलानकर्ता

जेस्ट मिलानकर्ताओं का एक समृद्ध संग्रह उपलब्ध कराता है। यहाँ कुछ सामान्य मिलानकर्ता दिए गए हैं, जिनका आप उपयोग करेंगे:

.toBe(value): सटीक समानता की जाँच करता है (जैसे ===)।
.toEqual(value): ऑब्जेक्ट या ऐरे की गहन समानता की जाँच करता है।
.not.toBe(value): असमानता की जाँच करता है।
.toBeTruthy() / .toBeFalsy(): सत्यता या असत्यता की जाँच करता है।
.toContain(item): जाँचता है कि किसी ऐरे या स्ट्रिंग में कोई आइटम शामिल है या नहीं।

jQuery के लिए आप अक्सर इन्हें jQuery विधियों के साथ मिलाकर उपयोग करेंगे, जैसे expect($element.text()).toBe('Expected Text');।

अपने परीक्षण चलाना

जब आपकी परीक्षण फ़ाइलें तैयार हो जाएँ, तो उन्हें चलाना आसान है। बस package.json में परिभाषित स्क्रिप्ट का उपयोग करें:

npm test

जेस्ट आपकी सभी परीक्षण फ़ाइलें खोजकर उन्हें JSDOM वातावरण में चलाएगा और टर्मिनल में परिणामों की रिपोर्ट देगा। यह बताएगा कि कौन-से परीक्षण सफल हुए, कौन-से विफल हुए, और हर विफलता का विवरण देगा।

सेटअप की त्वरित जाँच

आपने Jest और JSDOM का उपयोग करके jQuery के लिए परीक्षण वातावरण तैयार करना सीखा है। DOM समर्थन वाले मूल जेस्ट सेटअप के लिए निम्नलिखित में से कौन-से कमांड और कॉन्फ़िगरेशन आवश्यक हैं?

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

पुनरावलोकन: परीक्षण वातावरण का सेटअप

इस पाठ में आपने जेस्ट का उपयोग करके अपने jQuery एप्लिकेशन के लिए एक मज़बूत परीक्षण वातावरण तैयार करना सीखा।

हमने npm init के साथ Node.js प्रोजेक्ट शुरू किया।
ब्राउज़र वातावरण का अनुकरण करने के लिए जेस्ट और jest-environment-jsdom इंस्टॉल किए।
JSDOM का उपयोग करने के लिए package.json में जेस्ट को कॉन्फ़िगर किया।
परीक्षण फ़ाइलों की संरचना बनाना, jQuery इम्पोर्ट करना और जेस्ट के मिलानकर्ताओं का उपयोग करके मूल अभिकथन लिखना सीखा।

यह आधार आपको प्रभावी परीक्षण लिखने में सक्षम बनाता है, जिससे आपका jQuery कोड विश्वसनीय और आसानी से रखरखाव योग्य रहता है।

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

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

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

पाठ्यक्रम: 22
पाठ: 48

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

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

क्या “टेस्टिंग परिवेश स्थापित करना” पाठ निःशुल्क है?

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

“टेस्टिंग परिवेश स्थापित करना” में मैं क्या सीखूँगा?

Jest या QUnit जैसे टूल का उपयोग करके टेस्टिंग परिवेश कॉन्फ़िगर करें और अपने jQuery फ़ंक्शन तथा प्लगइन के व्यवहार की जाँच के लिए अभिकथन स्थापित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“टेस्टिंग परिवेश स्थापित करना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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