मेन्यू

जेस्ट ट्यूटोरियल - जेस्ट फ्रेमवर्क का उपयोग करके जावास्क्रिप्ट यूनिट टेस्टिंग

  • मुख्य
  • अन्य
  • जेस्ट ट्यूटोरियल - जेस्ट फ्रेमवर्क का उपयोग करके जावास्क्रिप्ट यूनिट टेस्टिंग

jest tutorial javascript unit testing using jest framework

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

इस जेस्ट ट्यूटोरियल में, हम विभिन्न जेस्ट फीचर्स, जेस्ट मैचर्स और जावास्क्रिप्ट यूनिट के लिए जेस्ट फ्रेमवर्क का उपयोग करने के तरीके के बारे में जानेंगे।

जेस्ट फेसबुक द्वारा निर्मित एक जावास्क्रिप्ट टेस्टिंग फ्रेमवर्क है।

यह मुख्य रूप से रिएक्ट (जो कि फेसबुक द्वारा भी बनाया गया है) आधारित ऐप के लिए बनाया गया है, लेकिन इसका उपयोग किसी भी जावास्क्रिप्ट-आधारित कोडबेस के लिए स्वचालन परिदृश्य लिखने के लिए किया जा सकता है।

इस जेस्ट टेस्टिंग ट्यूटोरियल में, हम जेस्ट की विभिन्न विशेषताओं, इसके मिलानों के बारे में जानेंगे और देखेंगे कि किस तरह हम जेस्ट का उपयोग एंड टू एंड उदाहरण के साथ कर सकते हैं। हम जेस्ट का उपयोग करके कोड कवरेज के बारे में भी पता लगाएंगे।

एक ट्यूटोरियल है

इस जेस्ट सीरीज़ में ट्यूटोरियल की सूची

ट्यूटोरियल # 1: जेस्ट ट्यूटोरियल - जेस्ट फ्रेमवर्क के साथ जावास्क्रिप्ट यूनिट परीक्षण
ट्यूटोरियल # 2: जेस्ट फ्रेमवर्क का उपयोग करके रिएक्ट ऐप्स का परीक्षण कैसे करें
ट्यूटोरियल # 3: जेस्ट कॉन्फ़िगरेशन और डिबगिंग जेस्ट आधारित टेस्ट

आप क्या सीखेंगे:

जेस्ट टेस्टिंग के साथ शुरुआत करना

जेस्ट के कुछ लाभ / विशेषताएं नीचे दी गई हैं:

  1. शून्य कॉन्फ़िगरेशन की आवश्यकता है।
  2. तेज: जेस्ट परीक्षण समानांतर में चलते हैं - यह बदले में परीक्षण के निष्पादन के समय को कम करता है।
  3. अंतर्निहित कोड कवरेज: जेस्ट बॉक्स से बाहर कोड कवरेज का समर्थन करता है - यह सभी सीआई-आधारित डिलीवरी पाइपलाइन और एक परियोजना के समग्र परीक्षण प्रभावशीलता के लिए एक बहुत ही उपयोगी मीट्रिक है।
  4. पृथक और सैंडबॉक्स किए गए परीक्षण: प्रत्येक जेस्ट परीक्षण अपने स्वयं के सैंडबॉक्स में चलता है, जो सुनिश्चित करता है कि कोई भी दो परीक्षण एक-दूसरे को बाधित या प्रभावित नहीं कर सकते हैं।
  5. शक्तिशाली मॉकिंग समर्थन: जेस्ट परीक्षण सभी प्रकार के मॉकिंग का समर्थन करते हैं - यह कार्यात्मक मॉकिंग, टाइमर मॉकिंग या अलग-अलग एपीआई कॉल का मजाक उड़ाते हैं।
  6. समर्थन स्नैपशॉट परीक्षण: स्नैपशॉट परीक्षण प्रतिक्रिया के दृष्टिकोण से प्रासंगिक है। जेस्ट परीक्षण किए जा रहे प्रतिक्रिया घटक के स्नैपशॉट को कैप्चर करने का समर्थन करता है - यह घटक के वास्तविक आउटपुट के साथ मान्य हो सकता है। यह घटक के व्यवहार को मान्य करने में बहुत मदद करता है।

जावास्क्रिप्ट यूनिट परीक्षण के लिए जेस्ट फ्रेमवर्क

इस खंड में, हम एक सरल जावास्क्रिप्ट फ़ंक्शन के लिए जेस्ट फ्रेमवर्क का उपयोग करके परीक्षण लिखने के लिए एक अंत से अंत उदाहरण देखेंगे। सबसे पहले, आइए देखें कि हमारी परियोजना में जेस्ट फ्रेमवर्क को कैसे स्थापित किया जाए

स्थापना है

जेस्ट केवल एक नोड पैकेज है और इसे किसी भी नोड-आधारित पैकेज मैनेजर का उपयोग करके स्थापित किया जा सकता है। उदाहरण, npm या यार्न।

आइए कुछ नमूना आदेश देखें जिनका उपयोग जेस्ट पैकेज को स्थापित करने के लिए किया जा सकता है।

yarn add --dev jest npm install --save-dev jest

विश्व स्तर पर जेस्ट मॉड्यूल को स्थापित करने के लिए, आप बस npm कमांड के साथ ’-g 'ध्वज का उपयोग कर सकते हैं। यह आपको npm परीक्षणों के लिए पैकेज फ़ाइल को कॉन्फ़िगर किए बिना सीधे जेस्ट कमांड का उपयोग करने में सक्षम करेगा।

npm install -g jest

एक नोड आधारित परियोजना में कीट का उपयोग करना

एक नोड-आधारित परियोजना में जेस्ट का उपयोग करने के लिए, जेस्ट के लिए नोड पैकेज स्थापित करने के लिए बस उपरोक्त अनुभाग से कमांड का उपयोग करें।

प्रारंभ से नोड प्रोजेक्ट बनाने के लिए नीचे दिए गए चरणों का पालन करें और फिर उसमें जेस्ट स्थापित करें।

# 1) अपने प्रोजेक्ट के नाम के साथ एक फ़ोल्डर / निर्देशिका बनाएं, उदाहरण के लिए , myFirstNodeProject

#दो) अब टर्मिनल या कमांड लाइन का उपयोग करके, उपरोक्त चरण में बनाई गई परियोजना पर जाएं और नीचे दिए गए कमांड का उपयोग करते हुए एनपीएम इनिट स्क्रिप्ट निष्पादित करें।

npm init

# 3) एक बार उपरोक्त कमांड निष्पादित होने के बाद, यह विभिन्न प्रश्नों / मापदंडों के लिए संकेत देगा।

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

# 4) अब नीचे दिए गए कमांड का उपयोग करके जेस्ट पैकेज को नई बनाई गई परियोजना में स्थापित करने के लिए कमांड निष्पादित करें।

npm install --save-dev jest

यह जेस्ट मॉड्यूल (साथ ही इसकी निर्भरता) को स्थापित करेगा।

# 5) अब, हमारे पास जेस्ट बाइंडिंग के साथ एक नोड प्रोजेक्ट तैयार है। JEST परीक्षणों को चलाने के लिए npm परीक्षण स्क्रिप्ट को कॉन्फ़िगर करें अर्थात् जब कमांड test npm परीक्षण ’निष्पादित किया जाता है, तो स्क्रिप्ट को सभी Jest ढांचे पर आधारित परीक्षण चलाना चाहिए।

ऐसा करने के लिए, package.json फ़ाइल को अद्यतन करें और नीचे दिखाए गए अनुसार स्क्रिप्ट अनुभाग जोड़ें।

'scripts': { 'test': 'jest' }

अंतिम package.json फ़ाइल नीचे दिखाए गए अनुसार दिखाई देगी।

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

एक जावास्क्रिप्ट फ़ंक्शन के लिए टेस्ट लिखना

इस खंड में, हम जोड़, घटाव और 2 संख्याओं के गुणन के लिए एक सरल जावास्क्रिप्ट फ़ंक्शन कोड बनाएंगे और इसके लिए संबंधित जेस्ट आधारित परीक्षण लिखेंगे।

पहले, आइए देखें कि परीक्षण के तहत हमारे आवेदन (या फ़ंक्शन) का कोड कैसा दिखता है।

# 1) उपरोक्त अनुभाग में बनाई गई नोड परियोजना में, एक जेएस फ़ाइल बनाएं जिसका नाम कैलकुलेटर है। नीचे दी गई सामग्री के साथ जेएस

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#दो) अब, इन परीक्षणों के लिए उसी फ़ोल्डर में एक परीक्षण फ़ाइल बनाएं, जिसका नाम है कैलकुलेटर .est.js - यह जेस्ट फ्रेमवर्क द्वारा अपेक्षित सम्मेलन है जिसमें जेस्ट आधारित परीक्षण वाली सभी फाइलें देखने के लिए हैं। परीक्षण में कोड निष्पादित करने के लिए, हम परीक्षण के तहत फ़ंक्शन को भी आयात करेंगे।

यह है कि फ़ाइल को सिर्फ आयात के साथ देखना होगा / घोषणा की आवश्यकता होगी।

const mathOperations = require('./calculator');

# 3) अब, मुख्य फ़ाइल में अलग-अलग तरीकों के लिए परीक्षण लिखें, जैसे कि राशि, अंतर और उत्पाद।

जेस्ट परीक्षण बीडीडी शैली परीक्षणों का पालन करते हैं, प्रत्येक परीक्षण सूट में एक मुख्य विवरण ब्लॉक होता है और इसमें कई परीक्षण ब्लॉक हो सकते हैं। इसके अलावा, कृपया ध्यान दें कि परीक्षणों में नेस्टेड वर्णन ब्लॉक भी हो सकते हैं।

2 संख्याओं को जोड़ने के लिए एक परीक्षण लिखें और अपेक्षित परिणामों को मान्य करें। हम 1 और 2 के रूप में संख्याओं की आपूर्ति करेंगे और 3 के रूप में आउटपुट की उम्मीद करेंगे।

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

कृपया नीचे दिए गए बिंदुओं को देखें। w.r.t परीक्षण ऊपर:

सेवा मेरे) वर्णन ब्लॉक टेस्ट सूट के लिए एक बाहरी विवरण है अर्थात् यह उन सभी परीक्षणों के लिए एक सामान्य कंटेनर का प्रतिनिधित्व करता है जो हम इस फाइल में कैलकुलेटर के लिए लिखने जा रहे हैं।

बी) अगला, हमारे पास एक व्यक्तिगत परीक्षण ब्लॉक है - यह एकल परीक्षण का प्रतिनिधित्व करता है। उद्धरण में स्ट्रिंग परीक्षण के नाम का प्रतिनिधित्व करती है।

सी) उम्मीद ब्लॉक में कोड का संदर्भ लें - 'उम्मीद' एक जोर के अलावा कुछ भी नहीं है। स्टेटमेंट 1 और 2 के साथ परीक्षण के तहत फ़ंक्शन में योग पद्धति को बुला रहा है और आउटपुट 3 होने की उम्मीद कर रहा है।

इसे बेहतर तरीके से समझने के लिए हम इसे और भी सरल तरीके से लिख सकते हैं।

कृपया नीचे देखें, अब हमने फ़ंक्शन कॉल और अभिकथन को 2 अलग-अलग कथनों के रूप में अलग किया है ताकि इसे अधिक रसीला बनाया जा सके।

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

घ) इस परीक्षण को चलाने के लिए, बस कमांड चलाएं ' समुद्र तल से ऊपर की परीक्षा 'प्रोजेक्ट स्थान पर टर्मिनल या कमांड प्रॉम्प्ट में।

आप नीचे दिखाए गए अनुसार आउटपुट देखेंगे।

टर्मिनल में कमांड

# 4) आइए कुछ और परीक्षण आजमाएँ

सेवा मेरे) सबसे पहले, एक असफल परीक्षा लिखें और देखें कि हमें क्या आउटपुट मिलता है। चलिए उसी परिणाम को कुछ गलत मान में बदल देते हैं जो हमने पिछले खंड में लिखा था। देखें कि परीक्षण कैसा दिखता है।

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

यहां हम 1 और 2 की राशि की उम्मीद कर रहे हैं जो कि 10 है।

आइए इसे निष्पादित करने का प्रयास करें और देखें कि हमें क्या मिलता है।

एक परीक्षण विफल होने पर विस्तृत आउटपुट

आप विस्तृत आउटपुट देख सकते हैं जब एक परीक्षण विफल हो जाता है यानी वास्तव में क्या लौटाया गया था और क्या अपेक्षित था और किस लाइन के कारण परीक्षण के तहत फ़ंक्शन में त्रुटि हुई आदि।

बी) आइए अन्य कार्यों के लिए और अधिक परीक्षण लिखें, अर्थात् अंतर और उत्पाद।

सभी परीक्षणों के साथ परीक्षण फ़ाइल नीचे दिखाए गए अनुसार दिखाई देगी।

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

जब उपरोक्त परीक्षण निष्पादित किए जाते हैं, नीचे दिया गया आउटपुट उत्पन्न होता है।

फ़ंक्शंस के लिए टेस्ट आउटपुट - अंतर और उत्पाद

वीडियो ट्यूटोरियल: जेस्ट क्या है

मैचर्स है

जेस्ट मुखर एक शर्त पर मेल करने वालों का उपयोग करते हैं। जेस्ट अपेरी से मैचर्स का उपयोग करता है। एपीआई एपीआई डॉक्टर को संदर्भित किया जा सकता है यहां।

जेस्ट परीक्षणों के साथ सबसे अधिक उपयोग किए जाने वाले कुछ मिलानकर्ताओं के माध्यम से चलो।

(१) समानता

ये सबसे ज्यादा इस्तेमाल होने वाले मैचर्स हैं। इनका उपयोग समानता या असमानता की जाँच के लिए किया जाता है और इसका उपयोग ज्यादातर अंकगणितीय कार्यों के लिए किया जाता है।

आइए नीचे कुछ उदाहरण देखें:

यहाँ हमने टोबे का उपयोग करते हुए 2 मैचर्स लिखे हैं और नॉट.बेटे जो बराबरी के अनुरूप हैं और न के बराबर हैं।

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) सच्चाई

यहाँ हम देखेंगे, अशक्त, मिथ्या और सत्य के लिए मैचर्स अर्थात् झूठे और सत्य मूल्य। यह ध्यान रखना महत्वपूर्ण है कि जो कुछ भी तार्किक रूप से सत्य नहीं है वह मिथ्या है।

उदाहरण के लिए, नंबर 0, अशक्त, खाली स्ट्रिंग, NaN सभी झूठे w.r.t जावास्क्रिप्ट के उदाहरण हैं।

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) संख्या मिलानकर्ता

इन मिलानों का उपयोग सामान्य अंकगणितीय कार्यों के लिए किया जा सकता है।

उदाहरण के लिए, अधिक, कम, अधिक, अधिक

अधिक जानकारी के लिए नीचे दिए गए उदाहरण देखें

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) स्ट्रिंग मैचर्स

कई बार हमें एक यूनिट परीक्षण में एक अभिव्यक्ति के रूप में एक नियमित अभिव्यक्ति से मेल खाने के लिए तार की आवश्यकता होती है। जेस्ट स्ट्रिंग्स के लिए एक नियमित अभिव्यक्ति के खिलाफ मिलान करने के लिए मैचर्स प्रदान करता है।

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

वीडियो ट्यूटोरियल: मैचर्स है

जेस्ट हुक - सेटअप और टियरडाउन

अन्य सभी xUnit आधारित यूनिट टेस्ट फ्रेमवर्क की तरह, जेस्ट फ्रेमवर्क भी सेटअप और क्लीनअप विधियों के लिए हुक प्रदान करता है। इन हुक विधियों को परीक्षण सूट में प्रत्येक परीक्षण से पहले और बाद में और परीक्षण के बाद निष्पादित किया जाता है।

पूरी तरह से 4 हुक हैं जो उपयोग करने के लिए उपलब्ध हैं।

  • पहले और बाद में: टेस्ट सूट में प्रत्येक परीक्षण से पहले और बाद में इन हुक को निष्पादित किया जाता है।
  • पहले और बाद में: ये हुक प्रत्येक परीक्षण सूट के लिए सिर्फ एक बार निष्पादित किया जाता है। यानी अगर एक परीक्षण सूट में 10 परीक्षण हैं, तो ये हुक हर परीक्षण निष्पादन के लिए बस एक बार निष्पादित किए जाएंगे।

आइए एक उदाहरण देखें: हम 2 संख्याओं को जोड़ने के एक ही उदाहरण के लिए इन हुक जोड़ देंगे।

हम चित्रण के लिए पहले हुक में इनपुट सेट करेंगे। परीक्षण फ़ाइल परीक्षण हुक के साथ दिखेगी जैसा कि नीचे दिखाया गया है।

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

सुझाव और युक्ति

# 1) कमांड लाइन की रिपोर्ट अच्छी है लेकिन बहुत पठनीय नहीं है। जेस्ट परीक्षणों के लिए HTML आधारित परीक्षण रिपोर्ट उत्पन्न करने के लिए पुस्तकालय / मॉड्यूल उपलब्ध हैं। इसे नीचे दिखाए अनुसार प्राप्त किया जा सकता है।

  • नीचे दिए गए कमांड का उपयोग करके jest-html- रिपोर्टर के लिए नोड पैकेज जोड़ें।
npm install --save-dev jest-html-reporter
  • अब नोड प्रोजेक्ट के पैकेज.जसन फ़ाइल में रिपोर्टर के लिए जेस्ट कॉन्फ़िगरेशन जोड़ें।
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • एक बार अब कॉन्फ़िगर होने पर, 'का उपयोग करके परीक्षण निष्पादित करें समुद्र तल से ऊपर की परीक्षा ”आज्ञा।
  • यदि सेटअप सफल है, तो आपको प्रोजेक्ट निर्देशिका में एक Html आधारित रिपोर्ट देखने में सक्षम होना चाहिए।

जाँच रिपोर्ट

दुनिया में शीर्ष बाजार अनुसंधान कंपनियों

# 2) कोड कवरेज रिपोर्ट बनाना: एक इकाई परीक्षण के दृष्टिकोण से कोड कवरेज सबसे महत्वपूर्ण मैट्रिक्स में से एक है। यह अनिवार्य रूप से मापता है कि परीक्षण के तहत आवेदन के लिए कितने प्रतिशत कथन / शाखाएं कवर की गई हैं।

जेस्ट कोड कवरेज के लिए बॉक्स समर्थन से बाहर प्रदान करता है। जेस्ट कवरेज रिपोर्ट प्राप्त करने के लिए, विन्यास है में जोड़ने की जरूरत है package.json फ़ाइल।

नीचे दिखाए अनुसार कॉन्फ़िगरेशन जोड़ें:

'jest': { 'collectCoverage':true }

एक बार जब यह कॉन्फ़िगरेशन हो जाता है, तो कमांड का उपयोग करके परीक्षण चलाने का प्रयास करें 'समुद्र तल परीक्षण से ऊपर' , और आप कर सकते है नीचे दिए गए परीक्षण निष्पादन परिणामों के ठीक नीचे कोड कवरेज विवरण देखें।

कोड कवरेज विवरण

वीडियो ट्यूटोरियल: जेस्ट कवरेज और HTML रिपोर्ट जनरेशन

निष्कर्ष

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

हमने जेस्ट द्वारा समर्थित विभिन्न प्रकार के मिलानों का पता लगाया और एचटीएमएल संवाददाताओं और कोड कवरेज रिपोर्टों को भी कवर किया।

अगले ट्यूटोरियल

अनुशंसित पाठ

^