Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Jest और Enzyme का उपयोग कर React में कॉम्पोनेन्ट की टेस्टिंग

by
Length:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

यह React में टेस्टिंग कॉम्पोनेन्ट पर श्रृंखला का दूसरा हिस्सा है। यदि आपके पास Jest के साथ पूर्व अनुभव है, तो आप आगे बढ़ सकते हैं और GitHub कोड को शुरुआती पॉइंट के रूप में उपयोग कर सकते हैं।

पिछले लेख में, हमने टेस्ट-ड्रिवेन डेवलपमेंट के पीछे बुनियादी सिद्धांतों और विचारों को शामिल किया था। हमने React में टेस्ट चलाने के लिए आवश्यक एनवायरनमेंट और टूल्स भी सेटअप किए हैं। टूलसेट में Jest, ReactTestUtils, Enzyme, और react-test-renderer शामिल थे।

इसके बाद हमने ReactTestUtils का उपयोग करके डेमो एप्लिकेशन के लिए कुछ टेस्ट लिखे और Enzyme जैसी अधिक मजबूत लाइब्रेरी की तुलना में इसकी कमियों की खोज करें।

इस पोस्ट में, हमें अधिक प्रैक्टिकल और रीयलिस्टिक टेस्ट्स लिखकर React में टेस्टिंग कंपोनेंट्स की गहरी समझ मिल जाएगी। आप Github में जा सकते हैं और शुरू करने से पहले मेरे रेपो को क्लोन कर सकते हैं।

Enzyme API के साथ शुरू करना

Enzyme.js Airbnb द्वारा बनाए गए ओपन-सोर्स लाइब्रेरी है, और यह React डेवलपर्स के लिए एक बढ़िया संसाधन है। यह ReactTestUtils API का उपयोग करता है, लेकिन ReactTestUtils के विपरीत, Enzyme एक उच्च स्तरीय API और आसानी से समझने वाले सिंटेक्स प्रदान करती है। यदि आपके पास पहले से नहीं हैं तो Enzyme इनस्टॉल करें।

Enzyme API तीन प्रकार के रेंडरिंग ऑप्शंस को एक्सपोर्ट करता है:

  1. shallow rendering
  2. full DOM rendering
  3. static rendering

Shallow rendering आइसोलेशन में एक विशेष कॉम्पोनेन्ट प्रस्तुत करने के लिए प्रयोग किया जाता है। चाइल्ड कंपोनेंट्स को रेंडर नहीं किया जाएगा, और इसलिए आप उनके बिहेवियर पर जोर नहीं दे पाएंगे। यदि आप यूनिट टेस्ट्स पर ध्यान केंद्रित करने जा रहे हैं, तो आप इसे प्यार करेंगे। आप शैलो इस तरह के एक कॉम्पोनेन्ट प्रस्तुत कर सकते हैं:

Full DOM rendering jsdom नामक लाइब्रेरी की सहायता से कॉम्पोनेन्ट का वर्चुअल DOM जेनेरेट करता है। आप ऊपर दिए गए उदाहरण में mount() के साथ shallow() मेथड को रीप्लेस करके इस फीचर का लाभ उठा सकते हैं। स्पष्ट लाभ यह है कि आप चाइल्ड के कंपोनेंट्स को भी रेंडर कर सकते हैं। यदि आप अपने चिल्ड्रन के साथ किसी कॉम्पोनेन्ट के बिहेवियर का टेस्टिंग करना चाहते हैं, तो आपको इसका उपयोग करना चाहिए।

Static rendering स्टैटिक HTML पर React कंपोनेंट्स को रेंडर करने के लिए प्रयोग किया जाता है। इसे Cheerio नामक लाइब्रेरी का उपयोग करके इम्प्लीमेंट किया गया है, और आप docs में इसके बारे में और अधिक पढ़ सकते हैं।

हमारे पिछले टेस्ट की समीक्षा

यहां टेस्ट्स हैं जिन्हें हमने अंतिम ट्यूटोरियल में लिखा था:

src/components/__ testing __/ProductHeader.test.js

पहला टेस्ट जांचता है कि क्या ProducerHeader कॉम्पोनेन्ट में <h2> टैग है, और दूसरा पता लगाता है कि उसके पास title नामक एक CSS क्लास है या नहीं। कोड को पड़ना और समझना मुश्किल है।

Enzyme का उपयोग करके फिर से लिखे गए टेस्ट्स यहां दिए गए हैं।

src/components/__ testing __/ProductHeader.test.js

सबसे पहले, मैंने shallow() का उपयोग करके <ProductHeader/> कॉम्पोनेन्ट का एक शैलो-रेंडर DOM बनाया और इसे एक वेरिएबल में स्टोर किया। फिर, मैंने टैग 'h2' के साथ नोड खोजने के लिए .find() मेथड का उपयोग किया। यह DOM से यह देखने के लिए पूछता है कि कोई मैच है या नहीं। चूंकि नोड का केवल एक इंस्टैंस है, इसलिए हम सुरक्षित रूप से यह मान सकते हैं कि node.length 1 के बराबर होगी।

दूसरा टेस्ट पहले के समान ही है। hasClass('title') मेथड रीटर्न करता है कि वर्तमान नोड के पास 'title' वैल्यू वाला className prop है या नहीं। हम toBeTruthy() का उपयोग करके सच्चाई को वेरीफाई कर सकते हैं।

yarn test का उपयोग करके टेस्ट्स चलाएं, और दोनों टेस्ट्स पास होने चाहिए।

बहुत बढ़िया! अब कोड को दोबारा करने का समय है। यह एक टेस्टर के पर्सपेक्टिव से महत्वपूर्ण है क्योंकि पड़ने लायक टेस्ट्स को मेन्टेन रखना आसान है। उपर्युक्त टेस्ट्स में, पहली दो लाइन्स दोनों टेस्ट्स के लिए समान हैं। आप beforeEach() फ़ंक्शन का उपयोग कर उन्हें रीफैक्टर कर सकते हैं। जैसा कि नाम से पता चलता है, beforeEach फंक्शन को प्रत्येक spec से पहले एक बार कॉल किया जाता है।

आप इस तरह से beforeEach() में एक एरो फ़ंक्शन पास कर सकते हैं।

src/components/__ testing __/ProductHeader.test.js

Jest और Enzyme के साथ यूनिट टेस्ट लिखना

आइए ProductDetails कॉम्पोनेन्ट के लिए कुछ यूनिट टेस्ट्स लिखें। यह एक प्रेसेंटेशनल कॉम्पोनेन्ट है जो प्रत्येक इंडिविजुअल प्रोडक्ट के विवरण को प्रदर्शित करता है।

Testing Components in React - ProductDetails component highlighted
हम उस सेक्शन को टेस्ट करने जा रहे हैं जो हाइलाइट किया गया है

यूनिट टेस्ट निम्नलिखित आसुमप्शन (assumption) पर जोर देने का प्रयास करेगा:

  • कॉम्पोनेन्ट मौजूद है और props पास हो रहे हैं।
  • प्रोडक्ट के नाम, डिस्क्रिप्शन और अवेलेबिलिटी जैसे prop प्रदर्शित होते हैं।
  • prop खाली होने पर एक एरर मैसेज प्रदर्शित होता है।

टेस्ट का बेयर बोन स्ट्रक्चर यहां दिया गया है। पहले beforeEach() प्रोडक्ट डेटा को एक वेरिएबल में स्टोर करता है, और दूसरा कॉम्पोनेन्ट को माउंट करता है।

src/components/__ testing __/ProductDetails.test.js

पहला टेस्ट आसान है:

यहां हम props() मेथड का उपयोग करते हैं जो एक कॉम्पोनेन्ट के props को प्राप्त करने के लिए आसान है।

दूसरे टेस्ट के लिए, आप अपने क्लास के नामों से एलिमेंट्स से क्वेरी कर सकते हैं और फिर जांच सकते हैं कि प्रोडक्ट का नाम, डिस्क्रिप्शन इत्यादि उस एलिमेंट के innerText का हिस्सा हैं या नहीं।

text() मेथड इस मामले में विशेष रूप से उपयोगी होता है ताकि एलिमेंट के इनर टेक्स्ट को रिट्रीव किया जा सके। product.status() के लिए एक एक्सपेक्टेशन लिखने का प्रयास करें और देखें कि सभी टेस्ट्स पास हो रहे हैं या नहीं।

अंतिम टेस्ट के लिए, हम किसी भी props के बिना ProductDetails कॉम्पोनेन्ट को माउंट करने जा रहे हैं। फिर हम '.product-error' नाम की एक क्लास की तलाश करेंगे और जांचेंगे कि इसमें "Sorry, Product doesn't exist" टेक्स्ट हो।

बस। हमने आइसोलेशन में <ProductDetails /> कॉम्पोनेन्ट का सफलतापूर्वक टेस्ट कर लिया है। इस प्रकार के टेस्ट यूनिट टेस्ट के रूप में जाने जाते है।

Stubs और Spies का उपयोग कर कॉलबैक की टेस्टिंग करना

हमने अभी props का टेस्ट करने के बारे में सीखा। लेकिन आइसोलेशन में एक कॉम्पोनेन्ट का टेस्ट करने के लिए, आपको कॉलबैक फ़ंक्शंस का टेस्ट करने की भी आवश्यकता है। इस सेक्शन में, हम ProductList कॉम्पोनेन्ट के लिए टेस्ट्स लिखेंगे और रास्ते में कॉलबैक फ़ंक्शंस के लिए stubs तैयार करेंगे। यहां ऐसी धारणाएं हैं जिन पर हमें जोर देने की आवश्यकता है।

Testing components in React - ProductList Component
  1. लिस्टेड प्रोडक्ट्स की संख्या कॉम्पोनेन्ट को props के रूप में प्राप्त ऑब्जेक्ट्स की संख्या के बराबर होनी चाहिए।
  2. <a> पर क्लिक करने से कॉलबैक फ़ंक्शन को इनवॉक करना चाहिए।

आइए beforeEach() फ़ंक्शन बनाएं जो हमारे परीक्षणों के लिए नकली प्रोडक्ट डेटा भरता है।

src/components/__ testing __/ProductList.test.js

अब, एक और beforeEach() ब्लॉक हमारे कॉम्पोनेन्ट को माउंट करें।

ProductList को props के माध्यम से प्रोडक्ट डेटा प्राप्त होता है। इसके अलावा, यह पैरेंट से कॉलबैक प्राप्त करता है। यद्यपि आप पैरेंट के कॉलबैक फ़ंक्शन के लिए टेस्ट लिख सकते हैं, लेकिन यह एक अच्छा विचार नहीं है कि आपका उद्देश्य यूनिट टेस्ट्स के साथ रहना है। चूंकि कॉलबैक फ़ंक्शन पैरेंट कॉम्पोनेन्ट से संबंधित है, इसलिए पैरेंट के लॉजिक को शामिल करने से टेस्ट्स जटिल हो जाएंगे। इसके बजाए, हम एक stub फ़ंक्शन बनाने जा रहे हैं।

एक Stub क्या है?

एक stub एक डमी फ़ंक्शन है जो कुछ अन्य फंक्शन होने का नाटक करता है। यह आपको पैरेंट या चाइल्ड के कंपोनेंट्स को इम्पोर्ट किए बिना स्वतंत्र रूप से किसी कॉम्पोनेन्ट का टेस्ट करने की अनुमति देता है। उपर्युक्त उदाहरण में, हमने jest.fn() को इनवॉक करके handleProductClick नामक एक stub फ़ंक्शन बनाया है।

अब हमें सिर्फ DOM में सभी <a> एलिमेंट्स को ढूंढना होगा और पहले <a> नोड पर एक क्लिक सिमुलेट करना होगा। क्लिक करने के बाद, हम जांच लेंगे कि handleProductClick() को इनवॉक किया गया था या नहीं। यदि हां, तो यह कहना उचित है कि हमारा लॉजिक अपेक्षित काम कर रहा है।

Enzyme आपको simulate() मेथड का उपयोग करके क्लिक जैसे यूजर एक्शन्स को आसानी से सिमुलेट करने देता है। handlerProductClick.mock.calls.length कितनी बार मॉक फ़ंक्शन कॉल किया गया इसकी संख्या लौटाता है। हम उम्मीद करते हैं कि यह 1 के बराबर होगी।

दूसरा टेस्ट अपेक्षाकृत आसान है। आप DOM में सभी <a> नोड्स को रिट्रीव करने के लिए find() मेथड का उपयोग कर सकते हैं। <a> नोड्स की संख्या productData ऐरे की लंबाई के बराबर होनी चाहिए जिसे हमने पहले बनाया था।

कॉम्पोनेन्ट की स्टेट, LifeCycleHook, और मेथड की टेस्टिंग

इसके बाद, हम ProductContainer कॉम्पोनेन्ट का टेस्ट करने जा रहे हैं। इसमें एक स्टेट, एक लाइफ साइकिल हुक, और एक क्लास मेथड है। यहां ऐसे दावे हैं जिन्हें वेरीफाई करने की आवश्यकता है:

  1. componentDidMount को बिल्कुल एक बार कॉल किया जाता है।
  2. कॉम्पोनेन्ट माउंट के बाद कॉम्पोनेन्ट के स्टेट को पॉप्युलेट किया जाता है।
  3. जब प्रोडक्ट id को आर्गुमेंट के रूप में पास किया जाता है तो handleProductClick() मेथड की स्टेट को अपडेट करना चाहिए।

यह जांचने के लिए कि componentDidMound को कॉल किया गया या नहीं, हम उस पर जासूसी करने जा रहे हैं। stub के विपरीत, जब आप किसी मौजूदा फ़ंक्शन का टेस्ट करने की आवश्यकता होती है तो एक spy का उपयोग किया जाता है। एक बार spy सेट हो जाने पर, आप यह कन्फर्म करने के लिए दावा लिख सकते हैं कि फ़ंक्शन कॉल किया गया या नहीं।

आप निम्नानुसार फ़ंक्शन पर spy कर सकते हैं:

src/components/__ testing __/ProductContainer.test.js

Jest.spyOn का पहला पैरामीटर एक ऑब्जेक्ट है जो उस क्लास के प्रोटोटाइप को परिभाषित करता है जिसे हम spy कर रहे हैं। दूसरा तरीका उस मेथड का नाम है जिस पर हम spy करना चाहते हैं।

अब कॉम्पोनेन्ट को रेंडर करें और यह जांचने के लिए एक दावा करें कि स्पाई को कॉल किया गया है या नहीं।

यह जांचने के लिए कि कॉम्पोनेन्ट की स्टेट कॉम्पोनेन्ट माउंट के बाद पॉप्युलेट है, हम स्टेट में सबकुछ पुनः प्राप्त करने के लिए Enzyme के state() मेथड का उपयोग कर सकते हैं।

तीसरा थोड़ा मुश्किल है। हमें यह वेरीफाई करने की आवश्यकता है कि handleProductClick अपेक्षित रूप से काम कर रहा है। यदि आप कोड पर जाते हैं, तो आप देखेंगे कि handleProductClick() मेथड प्रोडक्ट id को इनपुट के रूप में लेती है, और फिर उस प्रोडक्ट के डिटेल के साथ this.state.selectedProduct को अपडेट करती है।

इसका टेस्ट करने के लिए, हमें कॉम्पोनेन्ट के मेथड को इनवॉक करने की आवश्यकता है, और आप वास्तव में component.instance().handleProductClick को कॉल करके कर सकते हैं। हम एक सैंपल प्रोडक्ट id में पास करेंगे। नीचे दिए गए उदाहरण में, हम पहले प्रोडक्ट की id का उपयोग करते हैं। फिर, हम यह जांच सकते हैं कि स्टेट को यह कन्फर्म करने के लिए अपडेट किया गया था कि assertion true है या नहीं। पूरा कोड यहां दिया गया है:

हमने 10 टेस्ट्स लिखे हैं, और यदि सब कुछ ठीक हो जाता है, तो आपको यही देखना चाहिए:

Final output with tests passing

सारांश

ओह! हमने Jest और Enzyme का उपयोग करके React में राइटिंग टेस्ट्स के साथ शुरू करने के लिए लगभग हर चीज को कवर किया है। Enzyme वेबसाइट पर जाने के लिए अब उनके API पर गहराई से देखने का अच्छा समय हो सकता है।

React में टेस्ट्स लिखने पर आपके विचार क्या हैं? मुझे कमैंट्स में उन्हें सुनना अच्छा लगेगा।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.