ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) · पाठ

एक्सटेंशन के लिए यूनिट परीक्षण लिखना

विश्वसनीयता सुनिश्चित करने के लिए लोकप्रिय JavaScript परीक्षण ढाँचों का उपयोग करके अपने एक्सटेंशन के तर्क के लिए यूनिट परीक्षण लागू कीजिए।

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

एक्सटेंशन के लिए यूनिट परीक्षण लिखना, CoddyKit पर ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

यूनिट टेस्टिंग का परिचय

स्वागत है! इस पाठ में हम ब्राउज़र एक्सटेंशन के लिए यूनिट टेस्टिंग का अध्ययन करेंगे। यूनिट टेस्टिंग आपके code के छोटे, अलग-अलग भागों की जाँच करने का तरीका है, जिन्हें अक्सर "units" कहा जाता है।

एक्सटेंशन के लिए इसका अर्थ है कि पूरे ब्राउज़र वातावरण को चलाए बिना अलग-अलग functions या modules की जाँच करना। इसका उद्देश्य यह सुनिश्चित करना है कि हर भाग अपने-आप सही ढंग से काम करे।

एक्सटेंशन का परीक्षण क्यों करें?

मज़बूत ब्राउज़र एक्सटेंशन बनाने के लिए परीक्षण बहुत महत्वपूर्ण है। इसके कारण हैं:

विश्वसनीयता: bugs को जल्दी पकड़ता है और सुनिश्चित करता है कि आपका एक्सटेंशन अपेक्षा के अनुसार काम करे।
रखरखाव-योग्यता: भविष्य के बदलावों को सुरक्षित बनाता है और अनजाने में होने वाली खराबी (regressions) को रोकता है।
API में बदलाव: ब्राउज़र APIs में होने वाले अपडेट (जैसे Manifest V3 में बदलाव) के अनुसार ढलने में सहायता करता है।
जटिल तर्क: यह सुनिश्चित करता है कि background या content script का पेचीदा तर्क सही है।

अपना परीक्षण फ़्रेमवर्क चुनें

कई JavaScript फ़्रेमवर्क tests लिखने और चलाने में सहायता करते हैं। लोकप्रिय विकल्पों में शामिल हैं:

Jest: Facebook का एक संपूर्ण परीक्षण समाधान, जो उपयोग में आसानी और अंतर्निहित mocking के लिए जाना जाता है।
Mocha: एक लचीला test runner, जिसे अक्सर Chai जैसी assertion library के साथ उपयोग किया जाता है।
Vitest: Vite पर आधारित एक तेज़, आधुनिक विकल्प।

इस पाठ में हम Jest की लोकप्रियता और व्यापक सुविधाओं के कारण इसका उपयोग करेंगे।

परीक्षण के लिए Jest सेट अप करें

शुरू करने के लिए, एक project folder बनाएँ और npm से उसे initialize करें। फिर Jest को development dependency के रूप में इंस्टॉल करें:

npm init -y
npm install --save-dev jest

इसके बाद, अपनी package.json file में एक test script जोड़ें, ताकि आप आसानी से tests चला सकें:

{
  "name": "my-extension-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.0.0" // Version may vary
  }
}

शुद्ध JavaScript तर्क का परीक्षण करें

आइए एक सरल utility function लिखें, जो आपके एक्सटेंशन के तर्क का हिस्सा हो सकता है। utils.js नाम की एक file बनाएँ:

// utils.js
function sum(a, b) {
  return a + b;
}

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = { sum, capitalize };

अपना पहला परीक्षण लिखें

अब utils.test.js नाम की एक test file बनाएँ। Jest उन files को अपने-आप ढूँढ़ लेता है, जिनका अंत .test.js या .spec.js से होता है।

हम अपने functions import करेंगे और अपने tests को परिभाषित तथा जाँचने के लिए Jest के test (या it) और expect syntax का उपयोग करेंगे। इस उदाहरण को चलाकर देखें!

// utils.test.js
const { sum, capitalize } = require('./utils');

test('sums two numbers correctly', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
});

test('capitalizes a string', () => {
  expect(capitalize('hello')).toBe('Hello');
  expect(capitalize('world')).toBe('World');
  expect(capitalize('')).toBe('');
});

// To run these tests, execute: npm test

Chrome APIs की चुनौती

ब्राउज़र एक्सटेंशन chrome.* APIs (जैसे, chrome.storage, chrome.tabs) पर बहुत अधिक निर्भर करते हैं। ये APIs केवल ब्राउज़र वातावरण में उपलब्ध होती हैं।

ब्राउज़र के बाहर यूनिट tests चलाने पर (जैसे Node.js-आधारित Jest के साथ), chrome object undefined होगा। इन APIs का उपयोग करने वाले तर्क का परीक्षण करने के लिए हमें उनका mock बनाना होगा।

Mocking का अर्थ है किसी object या function का अनुकरण किया हुआ संस्करण बनाना, ताकि परीक्षण के दौरान उसके व्यवहार को नियंत्रित किया जा सके।

chrome.storage का मॉक बनाना

आइए ऐसी utility बनाएँ, जो chrome.storage.local का उपयोग करती हो। आमतौर पर यह function आपकी background script या किसी अन्य module में होगा।

पहले, हमारा utility function (जैसे, storageUtils.js में):

// storageUtils.js
async function saveSetting(key, value) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    await chrome.storage.local.set({ [key]: value });
    return true;
  }
  // Fallback for non-browser environments or missing API
  console.warn('chrome.storage.local not available');
  return false;
}

async function getSetting(key) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    const result = await chrome.storage.local.get(key);
    return result[key];
  }
  // Fallback
  console.warn('chrome.storage.local not available');
  return undefined;
}

module.exports = { saveSetting, getSetting };

मॉक की गई APIs के साथ परीक्षण

अब storageUtils.js के लिए एक test लिखते हैं। इसके व्यवहार का अनुकरण करने के लिए हम प्रत्येक test से पहले chrome.storage.local का mock बनाएँगे।

मॉक functions बनाने और उनके calls को ट्रैक करने के लिए Jest का jest.fn() बहुत उपयोगी है। इस test को चलाकर देखें!

// storageUtils.test.js
const { saveSetting, getSetting } = require('./storageUtils');

// Mock chrome.storage.local globally for tests
const mockStorage = {};
global.chrome = {
  storage: {
    local: {
      set: jest.fn(async (obj) => {
        Object.assign(mockStorage, obj);
        return Promise.resolve();
      }),
      get: jest.fn(async (key) => {
        return Promise.resolve({ [key]: mockStorage[key] });
      }),
    },
  },
};

beforeEach(() => {
  // Reset mock storage and clear Jest mock calls before each test
  for (const key in mockStorage) { delete mockStorage[key]; }
  chrome.storage.local.set.mockClear();
  chrome.storage.local.get.mockClear();
});

test('saveSetting saves data to chrome.storage.local', async () => {
  await saveSetting('username', 'CoddyKit');
  expect(chrome.storage.local.set).toHaveBeenCalledWith({ username: 'CoddyKit' });
  expect(mockStorage.username).toBe('CoddyKit');
});

test('getSetting retrieves data from chrome.storage.local', async () => {
  mockStorage.username = 'CoddyKit'; // Pre-set mock storage
  const username = await getSetting('username');
  expect(chrome.storage.local.get).toHaveBeenCalledWith('username');
  expect(username).toBe('CoddyKit');
});

// To run these tests, execute: npm test

त्वरित जाँच: यूनिट टेस्टिंग

आपने यूनिट टेस्टिंग और ब्राउज़र APIs का mock बनाना सीख लिया है। ब्राउज़र एक्सटेंशन के तर्क की यूनिट टेस्टिंग के बारे में निम्नलिखित में से कौन-सा कथन TRUE है?

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

पुनरावलोकन: यूनिट टेस्टिंग

इस पाठ में आपने सीखा:

ब्राउज़र एक्सटेंशन के लिए यूनिट टेस्टिंग का महत्व।
Jest का उपयोग करके परीक्षण वातावरण सेट अप करना।
शुद्ध JavaScript functions के लिए यूनिट tests लिखना।
ब्राउज़र के बाहर एक्सटेंशन के तर्क का परीक्षण करने के लिए chrome.* APIs का mock बनाने की अवधारणा और तरीका।

मज़बूत और आसानी से रखरखाव योग्य एक्सटेंशन बनाने के लिए यूनिट टेस्टिंग एक महत्वपूर्ण कौशल है। अभ्यास करते रहें, ताकि आपके एक्सटेंशन का मुख्य तर्क हमेशा सही बना रहे!

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

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

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

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

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

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

क्या “एक्सटेंशन के लिए यूनिट परीक्षण लिखना” पाठ निःशुल्क है?

हाँ—“एक्सटेंशन के लिए यूनिट परीक्षण लिखना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“एक्सटेंशन के लिए यूनिट परीक्षण लिखना” में मैं क्या सीखूँगा?

विश्वसनीयता सुनिश्चित करने के लिए लोकप्रिय JavaScript परीक्षण ढाँचों का उपयोग करके अपने एक्सटेंशन के तर्क के लिए यूनिट परीक्षण लागू कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

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

“एक्सटेंशन के लिए यूनिट परीक्षण लिखना” पाठ पूरा करने में कितना समय लगता है?

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

क्या मैं इस ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पाठ में कोड लिख और चला सकता हूँ?

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

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

← ब्राउज़र एक्सटेंशन विकास (Chrome और Edge) पर वापस जाएँ