Back to Question Center
0

जैस्ट का उपयोग करने वाले घटक का परीक्षण करने के लिए कैसे करें            जस्टरेटेड विषय का उपयोग करने वाले घटक का परीक्षण कैसे करें: Node.jsnpmRaw मिमल

1 answers:
जेस्ट का प्रयोग करने वाले घटक का परीक्षण कैसे करें

प्रतिक्रिया करने के लिए उच्च-गुणवत्ता वाले गहराई से परिचय के लिए, आप कनाडा के पूर्ण-स्टैक डेवलपर वेस बोस के पीछे नहीं जा सकते। यहां अपना कोर्स करने का प्रयास करें, और 25% से प्राप्त करने के लिए कोड SITEPOINT का उपयोग करें और साइटपॉइंट का समर्थन करने में सहायता करें।

यह आलेख अतिथि लेखक के द्वारा है जैक फ्रैंकलिन । साइटपॉइंट अतिथि पोस्ट का उद्देश्य आपको जावास्क्रिप्ट समुदाय के प्रमुख लेखकों और स्पीकर से सामग्री लाने में लाना है।

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

How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt

नमूना आवेदन

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

आवेदन ES2015 में लिखा है, बेबेल ES2015 के साथ सेमील्ट का उपयोग करते हुए संकलित और प्रीसेट प्रेजेंट्स। मैं बिल्ड सेट अप के विवरण में नहीं जाऊंगा, लेकिन अगर आप इसे चेक करना चाहते हैं तो यह गीथहब रेपो में है। स्थानीय स्तर पर चलने वाले ऐप को कैसे प्राप्त करें, आपको README में पूर्ण निर्देश मिलेगा। यदि आप और अधिक पढ़ना चाहते हैं, तो एप्लिकेशन को सेमील्ट का उपयोग करके बनाया गया है, और मैं उपकरण की अच्छी शुरुआत के रूप में "ए शुरुआत की गाइड टू Semaltेट" की सलाह देता हूं।

आवेदन के प्रवेश बिंदु एप / इंडेक्स जेएस , जो सिर्फ एचटीएमएल में टोडोस घटक को प्रस्तुत करता है:

   प्रस्तुत करना (,दस्तावेज़। getElementById ( 'ऐप्लिकेशन'));    

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

क्योंकि टोडोस घटक में सभी राज्य होते हैं, इसे टोडो और एडोडा घटकों को इसकी सूचना देने के लिए, जब भी कुछ परिवर्तन होता है, इसलिए, यह इन घटकों में फ़ंक्शंस गुजरता है, जब वे कुछ डेटा बदलते हैं, और टोडोस राज्य को तदनुसार अपडेट कर सकते हैं।

अंत में, अब, आप देखेंगे कि सभी व्यवसाय तर्क एप / स्टेट फ़ंक्शंस में निहित है। जेएस :

   निर्यात फ़ंक्शन टॉगलडोन (राज्य, आईडी) {. }निर्यात समारोह addTodo (राज्य, todo) {. }निर्यात फ़ंक्शन deleteTodo (राज्य, आईडी) {. }    

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

यदि आप Semalt्ट से परिचित हैं, तो वे काफी समान हैं जो मिमलेट एक रेड्यूसर कहेंगे. लेकिन इस आकार के आवेदन के लिए आप अक्सर स्थानीय घटक राज्य और कुछ अच्छी तरह से समतल कार्यों को पर्याप्त से अधिक होने के लिए मिलेंगे।

टीडीडी या टीडीडी के लिए नहीं?

टेस्ट-प्लेड डेवलपमेंट के पेशेवरों और विपक्षों पर लिखे गए कई लेख हैं, जहां डेवलपर्स को परीक्षा तय करने के लिए कोड लिखने से पहले, परीक्षण पहले लिखने की उम्मीद है। इसके पीछे का विचार यह है कि, पहले परीक्षण लिखकर, आपको उस एपीआई के बारे में सोचना होगा जो आप लिख रहे हैं, और इससे बेहतर डिजाइन हो सकता है मेरे लिए, मुझे लगता है कि यह बहुत व्यक्तिगत वरीयता में आता है और मैं जिस तरह से परीक्षण कर रहा हूं, उसे भी नीचे आता है। मैंने पाया है कि, प्रतिक्रिया घटकों के लिए, मैं पहले घटकों को लिखना चाहूंगा और फिर कार्यशीलता के सबसे महत्वपूर्ण बिट्स में परीक्षण जोड़ना चाहता हूं। हालांकि, यदि आपको लगता है कि आपके घटकों के लिए पहले लेखन परीक्षण आपके वर्कफ़्लो में फिट बैठता है, तो आपको ऐसा करना चाहिए। यहां कोई कठोर नियम नहीं है; जो भी आपके और आपकी टीम के लिए अच्छा लगता है

ध्यान दें कि यह आलेख सामने वाले एंड्रॉइड कोड पर ध्यान केंद्रित करेगा। यदि आप पीछे की ओर ध्यान केंद्रित कुछ की तलाश कर रहे हैं, तो नोड में साइटपॉईंट के कोर्स टेस्ट-चालित विकास की जांच करना सुनिश्चित करें। जे एस।

जैस्ट का परिचय

जेस्ट पहली बार 2014 में जारी किया गया था, और हालांकि यह शुरू में बहुत रुचि लेता था, लेकिन परियोजना थोड़ी देर के लिए निष्क्रिय थी और इसलिए सक्रिय रूप से काम नहीं किया। हालांकि, फेसबुक ने पिछले साल जेस्ट में सुधार करने के लिए निवेश किया है, और हाल ही में प्रभावशाली बदलावों के साथ कुछ रिलीज प्रकाशित किए हैं जो इसे पुनर्विचार करने के लायक बनाते हैं प्रारंभिक ओपन सोर्स रिहाई की तुलना में जेस्ट का एकमात्र समानता नाम और लोगो है। बाकी सब कुछ बदल गया है और फिर से लिखा हुआ है। अगर आप इस बारे में अधिक जानना चाहते हैं, तो आप क्रिस्टोफ़ Semaltट टिप्पणी को पढ़ सकते हैं, जहां वह इस परियोजना की वर्तमान स्थिति पर चर्चा करता है।

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

(9 4) जेस्ट स्थापित और कॉन्फ़िगर

शुरू करने के लिए, हमें जेस्ट इंस्टॉल करने की आवश्यकता है। क्योंकि हम भी सेमील्ट का प्रयोग कर रहे हैं, हम दूसरे मॉड्यूल स्थापित करेंगे जो जेस्ट और Semaltेट को बॉक्स से अच्छी तरह से खेलते हैं:

     एनपीएम इंस्टॉल करें --save-dev babel-jest babel-polyfill babel-preset-es2015 babel-preset-react jest    

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

   {"प्रीसेट": ["es2015", "प्रतिक्रिया"]}    

हम अभी तक किसी भी मिसाइल परीक्षण उपकरण स्थापित नहीं करेंगे, क्योंकि हम अपने घटकों के परीक्षण के साथ शुरू नहीं करने जा रहे हैं, लेकिन हमारे राज्य कार्य

जेस्ट को हमारे __ टेस्ट्स फ़ोल्डर में परीक्षणों की उम्मीद है, जो जावास्क्रिप्ट समुदाय में एक लोकप्रिय सम्मेलन बन गया है, और यह हम यहां पर रहना चाहते हैं। यदि आप __tests__ सेटअप के प्रशंसक नहीं हैं, बॉक्स जेस्ट से भी कोई भी ढूंढने में सहायता करता है। परीक्षा। जेएस और कल्पना। जेएस फाइल भी

जैसा कि हम अपने राज्य कार्यों का परीक्षण करेंगे, आगे बढ़ें और __ टेस्ट्स __ / स्टेट फ़ंक्शंस बनाएं। परीक्षा। जेएस

सेमीलेट एक उचित परीक्षण शीघ्र ही लिखते हैं, लेकिन अभी के लिए, इस डमी टेस्ट में डालें, जो हमें सब कुछ ठीक से काम करने की जांच करेगा और हमारे पास जेस्ट कॉन्फ़िगर किया गया है।

   वर्णन ('अतिरिक्त',    => {यह ('जानता है कि 2 और 2 बनाओ 4',    => {उम्मीद है (2 + 2) टोबे  
;});});

अब, अपने पैकेज में सिर जेसन .

   "स्क्रिप्ट": {"परीक्षण": "मजाक"}    

यदि आप अब स्थानीय स्तर पर एनपीएम परीक्षा चलाते हैं, तो आपको अपने परीक्षण चलना चाहिए, और पास करें!

     पास __ट्रेट्स __ / राज्य-कार्य परीक्षा। jsइसके अलावा✓ जानता है कि 2 और 2 बनाओ 4 (5 मि।)टेस्ट सूट: 1 पारित, 1 कुलटेस्ट: 1 पारित, 1 कुलस्नैपशॉट्स: 0 पास, 0 कुलसमय: 3 - outdoor stack chairs. 11 एस    

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

जब वास्तविक तर्क बनाने की बात आती है, तो आप उस चीज को लपेटते हैं जिसे आप उम्मीद कॉल के भीतर परीक्षण करना चाहते हैं, इससे पहले कि उस पर एक तर्क बुलाना। इस मामले में, हमने टू बी का इस्तेमाल किया है। आप जेस्ट दस्तावेज़ीकरण में सभी उपलब्ध दावों की एक सूची पा सकते हैं। toBe जांचता है कि दिए गए मान परीक्षण के तहत मान से मेल खाता है, === ऐसा करने के लिए हम इस ट्यूटोरियल के माध्यम से जेस्ट के कुछ कथनों को पूरा करेंगे।

टेस्टिंग बिजनेस लॉजिक

अब हमने जेस्ट को एक डमी टेस्ट पर काम किया है, चलो इसे एक असली एक पर चलते हैं! हम पहले हमारे राज्य कार्यों का परीक्षण करने जा रहे हैं, टॉगल डोन टॉगल डोन वर्तमान स्थिति और एक टोड की आईडी लेता है जिसे हम टॉगल करना चाहते हैं। प्रत्येक सौदा में एक किया संपत्ति है, और टॉगल डोन इसे स्वैप करना चाहिए सच से झूठ , या इसके विपरीत।

यदि आप इस के साथ अनुसरण कर रहे हैं, तो सुनिश्चित करें कि आपने रेपो को क्लोन किया है और एप फ़ोल्डर को उसी निर्देशिका में कॉपी किया है जिसमें आपका ___टस्टेस_ फ़ोल्डर है। आपको शॉर्टिड पैकेज ( एनपीएम इंस्टॉल शॉर्टिड --save ) को भी इंस्टॉल करना होगा, जो टोडो एप की निर्भरता है।

मैं समारोह एप / स्टेट फंक्शंस से आयात करके शुरू करूँगा जेएस , और परीक्षण की संरचना की स्थापना हालांकि जेस्ट आपको का वर्णन करने के लिए और यह घोंसले के रूप में गहराई से उपयोग करने की अनुमति देता है, आप भी टेस्ट उपयोग कर सकते हैं, जो अक्सर बेहतर पढ़ा जाएगा। टेस्ट जेस्ट यह फ़ंक्शन के लिए सिर्फ एक उपनाम है, लेकिन कभी-कभी पढ़ा और आसानी से नेस्टेड कम परीक्षण कर सकता है।

उदाहरण के लिए, यहाँ मैं कैसे नेस्टेड का वर्णन और यह कॉल के साथ उस परीक्षा लिखूंगा:

   आयात करें {toggleDone} से '' । / अनुप्रयोग / राज्य कार्यों ';वर्णन करें ('टॉगल डोन',    => {वर्णन ('जब एक अधूरा करार दिया',    => {यह ('पूर्ण होने के रूप में चिह्नित करता है',    => {});});});    

और यहां बताया गया है कि मैं इसे टेस्ट के साथ कैसे करूँगा:

   आयात करें {toggleDone} से '' । / अनुप्रयोग / राज्य कार्यों ';परीक्षण ('टॉगल पूर्ण एक अपूर्ण टोड पूर्ण',    => {});    

परीक्षण अभी भी अच्छी तरह से पढ़ता है, लेकिन अब इस तरह से कम इंडेंटेशन हो रहा है। यह एक मुख्य रूप से व्यक्तिगत वरीयता के नीचे है; जो भी शैली आप के साथ और अधिक आराम कर रहे हैं चुनें।

अब हम दावा लिख ​​सकते हैं। सबसे पहले हम इसे शुरू करने से पहले टॉगल डोन में, हमारे टोगो की आईडी के साथ-साथ टॉगल करना चाहते हैं। टॉगल डोन हमारी पूर्ण स्थिति को वापस करेगा, जिसे हम फिर से कह सकते हैं:

   कॉन्स्ट स्टार्टस्टेट = {todos: [{आईडी: 1, किया: गलत, नाम: 'खरीदें दूध'}]};const finState = टॉगल डोन (स्टार्टस्टेट, 1);उम्मीद है (फिनस्टेट टोडोस)। बराबर([{id: 1, done: true, नाम: 'दूध खरीदें'}]);    

ध्यान दें कि मेरा दावा करने के लिए मैं से एक्सेल का उपयोग करता हूं आप सेबी आदिम मानों पर, जैसे स्ट्रिंग्स और नंबर, का उपयोग करना चाहिए, लेकिन ऑब्जेक्ट्स और एरे के लिए से एक्सेल .

इसके साथ हम अब एनपीएम परीक्षा चला सकते हैं और हमारे राज्य परीक्षण परीक्षा पास देख सकते हैं:

     पास __ट्रेट्स __ / राज्य-कार्य परीक्षा। js✓ टॉगल डोन एक अपूर्ण टोडो (9 एमएमएस) पूरा करता हैटेस्ट सूट: 1 पारित, 1 कुलटेस्ट: 1 पारित, 1 कुलस्नैपशॉट्स: 0 पास, 0 कुलसमय: 3. 166 एस    

परिवर्तन पर चक्कर लगाने वाले टेस्ट

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

इसे घड़ी मोड में चलाने के लिए, आप एनपीएम परीक्षण - - वॉच चला सकते हैं। जो भी आप एनपीएम परीक्षा पहले - के पास पारित करते हैं, वह सीधे अंतर्निहित कमांड तक पहुंचाएंगे। इसका अर्थ है कि ये दो आज्ञा प्रभावी रूप से समतुल्य हैं:

  • एनपीएम परीक्षा - - वॉच
  • जेस्ट - वॉच

मैं यह सुझाव देता हूं कि आप इस ट्यूटोरियल के बाकी हिस्सों के लिए जेस्ट को दूसरे टैब में, या टर्मिनल विंडो में छोड़ दें।

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

मुझे परीक्षा दिखाएं

याद रखें कि आपको आयात करने के लिए शीर्ष पर 42 कथन डिलीटोडो के साथ टॉगल टोडो :

को अपडेट करना होगा।
   आयात करें {toggleTodo, deleteTodo} 'से' । / अनुप्रयोग / राज्य कार्यों ';     

और यहां बताया गया है कि कैसे सेमीलेट टेस्ट लिखा गया है:

   परीक्षा ('हटानाटोडो को इसे हटा दिया गया है',    = & gt; {const startState = {todos: [{आईडी: 1, किया: गलत, नाम: 'खरीदें दूध'}]};const finState = deleteTodo (स्टार्टस्टेट, 1);उम्मीद है (फिनस्टेट टोडोस)। बराबर([]);});    

परीक्षण पहले से बहुत भिन्न नहीं होता है: हम अपनी प्रारंभिक अवस्था की स्थापना करते हैं, हमारे कार्य को चलाते हैं और फिर समाप्त राज्य पर जोर देते हैं। यदि आपने जेस्ट चलते हुए घड़ी मोड में छोड़ दिया, तो देखें कि यह आपकी नई परीक्षा कैसे उठाता है और इसे चलाता है, और ऐसा करने के लिए कितनी तेज़ है! अपने परीक्षणों पर तत्काल प्रतिक्रिया प्राप्त करने का एक शानदार तरीका, जैसा कि आप उन्हें लिखें

ऊपर दिए गए परीक्षण भी एक परीक्षण के लिए एकदम सही लेआउट प्रदर्शित करते हैं, जो है:

  • सेट अप
  • परीक्षण के तहत कार्य निष्पादित
  • परिणामों पर जोर देते हैं

इस तरह से परीक्षणों को रखकर, आप उन्हें अनुसरण करना और उनके साथ काम करना आसान पाएंगे।

अब हम अपने राज्य कार्यों का परीक्षण करने में खुश हैं, हम साम्बाल्ट घटकों पर आगे बढ़ते हैं।

टेस्टिंग रिएक्शन कॉम्पोनेंट्स

यह ध्यान देने योग्य है कि, डिफ़ॉल्ट रूप से, मैं वास्तव में आपको अपने Semalt घटकों पर बहुत अधिक परीक्षण नहीं लिखने के लिए प्रोत्साहित करता हूँ जो कुछ भी आप बहुत अच्छी तरह से परीक्षण करना चाहते हैं, जैसे व्यवसायिक तर्क, को आपके घटकों से निकाला जाना चाहिए और स्टैंडअलोन फ़ंक्शन पर बैठना चाहिए, ठीक उसी तरह के राज्य कार्यों जैसे कि हमने पहले परीक्षण किया था। उसने कहा, यह कुछ साम्बाटल इंटरैक्शन का परीक्षण करने के लिए कई बार उपयोगी होता है (यह सुनिश्चित करने के लिए कि एक विशिष्ट फ़ंक्शन को सही तर्क के साथ बुलाया जाता है जब उपयोगकर्ता एक बटन क्लिक करता है, उदाहरण के लिए)। हम यह जांच कर शुरू करेंगे कि हमारे साम्बाल्ट घटक सही डेटा प्रस्तुत करते हैं, और फिर इंटरैक्शन परीक्षण को देखें। तो हम स्नैपशॉट्स पर जायेंगे, जेस्ट की एक सुविधा, जो कि साम्मल घटकों का उत्पादन अधिक सुविधाजनक बनाता है. हम एंजाइम भी स्थापित करेंगे, एक आवरण लाइब्रेरी जिसे एयरबीएनबी द्वारा लिखित किया गया है, परीक्षण करता है कि ये बहुत आसान है। हम अपने परीक्षणों के दौरान इस एपीआई का उपयोग करेंगे। एंजाइम एक शानदार पुस्तकालय है, और प्रतिक्रिया टीम भी इसे घटित घटकों का परीक्षण करने के तरीके के रूप में सुझाती है।

     एनपीएम इंस्टॉल --save-dev प्रतिक्रिया-एडिशन-टेस्ट-यूटीज़ एंजाइम    

आइए देखें कि टोडो घटक पैराग्राफ के अंदर अपने पाठ का पाठ प्रस्तुत करता है पहले हम बनायेंगे __ टेस्ट्स __ / टैडो परीक्षा। जेएस , और हमारे घटक आयात करें:

   तोडो से आयात करें '। । / अनुप्रयोग / कार्य करने की ';आयात 'प्रतिक्रिया' से प्रतिक्रिया;'एंजाइम' से आयात {माउंट};परीक्षण ('टोडो घटक टोडो का पाठ प्रदान करता है',    => {});    

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

हम टोडो बनाने के लिए माउंट का उपयोग कर सकते हैं:

   कॉन्स्ट टूडो = {id: 1, done: false, नाम: 'मिल्क खरीदें'};const आवरण = माउंट ();    

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

   कॉन्स्ट पी = आवरण खोजें ('टॉगल-टूो');    

और अंत में, हम इस बात पर जोर दे सकते हैं कि इसके भीतर का पाठ दूध खरीदें :

   उम्मीद (पी। पाठ   ) tobe ('खरीदें दूध');    

Semaltेट हमारे पूरे परीक्षण की तरह दिखता है:

   तोडो से आयात करें '। । / अनुप्रयोग / कार्य करने की ';आयात 'प्रतिक्रिया' से प्रतिक्रिया;'एंजाइम' से आयात {माउंट};परीक्षण ('TodoComponent उसमें पाठ प्रदान करता है',    => {const todo = {id: 1, done: false, नाम: 'दूध खरीदें'};const आवरण = माउंट ();const p = आवरण खोजें ('टॉगल-टूो');अपेक्षा (पी। पाठ   ) tobe ('खरीदें दूध');});    

ओफ़्फ़! आप सोच सकते हैं कि यह बहुत काम और प्रयास था कि "खरीदें दूध" को स्क्रीन पर रखा जाता है, और, ठीक है .आप सही होंगे अब तक अपने घोड़ों को पकड़ो; अगले खंड में हम इसे बहुत आसान बनाने के लिए मिमल स्नैपशॉट की क्षमता का उपयोग करने पर विचार करेंगे।

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

इस परीक्षा में हम यह दावा करने जा रहे हैं कि जब टोडो क्लिक किया जाता है, तो घटक कॉल करेगा बदलेगा इसे दिए गए समर्थन।

   टेस्ट ('टोडो कॉल किया गया जब टोडो क्लिक किया जाता है बदलें',    => {});    

हम क्या करना चाहते हैं, एक ऐसा फ़ंक्शन है जिसका हम अपने कॉल का ट्रैक रख सकते हैं, और उस तर्क के साथ जिसे इसे कहा जाता है इसके बाद हम यह जांच सकते हैं कि जब उपयोगकर्ता एक सेतु पर क्लिक करता है, तो किया हुआ चेंज फ़ंक्शन को बुलाया जाता है और उसे सही तर्क भी कहा जाता है शुक्र है, जैस्ट जासूस के साथ बॉक्स के बाहर प्रदान करता है। ए जासूस एक ऐसा कार्य है जिसका कार्यान्वयन आपको परवाह नहीं करता है; आप बस के बारे में परवाह है कि कब और कैसे कहा जाता है। इसके बारे में सोचो जैसे आप फ़ंक्शन पर जासूसी करते हैं। एक बनाने के लिए, हम फोन करते हैं एफ एन :

   const doneChange = jest fn   ;    

यह एक ऐसा फ़ंक्शन देता है जिसे हम जासूसी कर सकते हैं और सुनिश्चित कर सकते हैं कि इसे सही कहा गया है. fn ;const आवरण = माउंट ();

अगला, हम पिछले पैराग्राफ की तरह, फिर से अपना पैराग्राफ पा सकते हैं:

   const p = testUtils findRenderedDOMComponentWithClass (गाया गया, 'टॉगल-टूो');    

और फिर हम एक उपयोगकर्ता घटना को अनुकरण करने के लिए अनुकरण पर कॉल कर सकते हैं क्लिक करें तर्क के रूप में:

   पी। ( 'क्लिक') अनुकरण;    

और जो कुछ भी करने के लिए छोड़ दिया गया है, यह दावा करता है कि हमारे जासूस फ़ंक्शन को सही ढंग से बुलाया गया है इस मामले में, हम उम्मीद कर रहे हैं कि इसे टोडो की आईडी के साथ बुलाया जाए, जो कि 1 है। हम उम्मीद करते हैं (doneChange) का उपयोग कर सकते हैं। toBeCalledWith यह दावा करने के लिए, और उसके साथ हम हमारे परीक्षण के साथ कर रहे हैं!

   टेस्ट ('टोडो कॉमपोनेन्ट कॉल किया गया जब टूडो क्लिक किया जाता है बदलें',    => {const todo = {id: 1, done: false, नाम: 'दूध खरीदें'};const doneChange = jest fn   ;const आवरण = माउंट ();const p = आवरण खोजें ('टॉगल-टूो');पी। ( 'क्लिक') अनुकरण;उम्मीद (doneChange)। toBeCalledWith   ;});    

स्नैपशॉट्स के साथ बेहतर घटक परीक्षण

मैंने ऊपर उल्लेख किया है कि यह घटित घटकों, विशेष रूप से कुछ सांसारिक कार्यों (जैसे टेक्स्ट को प्रस्तुतीकरण) के परीक्षण के लिए बहुत सी काम की तरह महसूस कर सकता है प्रतिक्रिया घटकों पर बड़े पैमाने पर दावा करने के बजाय, जेस्ट आपको स्नैपशॉट परीक्षण चलाने की सुविधा देता है। सामुदायिक अंतःक्रियाओं के लिए इतना उपयोगी नहीं हैं (इस मामले में मैं अभी भी एक परीक्षा पसंद करता हूं जैसे हमने अभी लिखा है), लेकिन यह जांचने के लिए कि आपके घटक का उत्पादन सही है, वे बहुत आसान हैं।

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

  • आपको पता चल जाएगा कि आपने एक गलती की है, और आप घटक को ठीक कर सकते हैं, इसलिए यह स्नैपशॉट फिर से मेल खाता है
  • या, आपने उद्देश्य पर यह परिवर्तन किया है, और आप स्नैपशॉट को अपडेट करने के लिए जेस्ट को बता सकते हैं।

इस तरह के परीक्षण का मतलब है कि:

  • आपके रिएक्ट घटकों को अपेक्षित रूप से व्यवहार करने के लिए सुनिश्चित करने के लिए आपको बहुत सारे कथनों को लिखना नहीं है
  • आप कभी भी किसी घटक के व्यवहार को कभी गलती नहीं बदल सकते, क्योंकि जेस्ट का एहसास होगा।

आपको अपने सभी घटकों को स्नैपशॉट भी नहीं करना पड़ता है। वास्तव में, मैं इसे सक्रिय रूप से इसके खिलाफ सुझाऊंगा। आप कुछ कार्यक्षमता के साथ घटकों को चुनना चाहिए जो आपको वास्तव में सुनिश्चित करने की ज़रूरत है काम करना है। आपके सभी घटकों को स्नैपशॉट करने से केवल उन परीक्षणों को धीमा कर दिया जाएगा जो उपयोगी नहीं हैं। याद रखें, सेमटॉल एक बहुत अच्छी तरह से जांच की गई ढांचा है, इसलिए हमें विश्वास है कि यह अपेक्षित रूप से व्यवहार करेगा। सुनिश्चित करें कि आप अपने कोड की बजाय फ्रेमवर्क का परीक्षण नहीं करते हैं!

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

     एनपीएम इंस्टॉल --save-dev प्रतिक्रिया-परीक्षण-रेंडरर    

अब, एक स्नैपशॉट का उपयोग करने के लिए हमारा पहला टोडो घटक टेस्ट पुनः लिखें। अभी के लिए, टोडो कॉमपोनेन्ट कॉल किए जाने की टिप्पणी करें जब टोडो पर क्लिक किया जाता है परीक्षण भी करें

आपको जो पहली चीज की ज़रूरत है वह रिएक्शन-टेस्ट रेंडरर आयात करती है, और माउंट के लिए आयात को हटा देती है। वे दोनों का उपयोग नहीं किया जा सकता है; आपको या तो एक या दूसरे का उपयोग करना होगा यही कारण है कि हमने अब तक अन्य परीक्षणों पर टिप्पणी की है. सर्जन करना();उम्मीद है (गाया गया टोजसन )। toMatchSnapshot ;});});

पहली बार जब आप इसे चलाते हैं, तो जेस्ट बहुत चतुर है यह महसूस करने के लिए कि इस घटक के लिए कोई स्नैपशॉट नहीं है, इसलिए इसे बनाता है चलो __ टेस्ट्स __ / __ स्नैपशॉट्स __ / टैडो पर नजर डालें। परीक्षा। जे एस। स्नैप :

   निर्यात करता है [`टोडो घटक को सही ढंग से सही ढंग से प्रस्तुत करता है 1`] =`  दूध खरीदें <एकclassName = "को नष्ट-कार्य करने"href = "#"onClick = {[समारोह]}> हटाना 
`;

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

   

=> यह टॉगल डोन }> {todo नाम}

Semaltेट देखें कि येस्ट क्या कहता है:

     असफल __टेस्ट्स __ / टैडो परीक्षा। js● टूडो घटक सही ढंग से सही ढंग से प्रस्तुत करता है> ठीक से रेंडर करता है(मान) की उम्मीद है। toMatchSnapshot   प्राप्त मूल्य संचित स्नैपशॉट 1 से मेल नहीं खाता। - स्नैपशॉट+ प्राप्त  -  <पी- क्लासनाम = "टॉगल-टोडो"- onClick = {[फ़ंक्शन]}> - दूध खरीदें- <एकclassName = "को नष्ट-कार्य करने"href = "#"onClick = {[समारोह]}> हटाना 
ऑब्जेक्ट पर <अनामित> (__tests __ / todo परीक्षा। जेएस: 21: 31)प्रक्रिया में _ टिक कॉलबैक (आंतरिक / प्रक्रिया / अगली_टिक। जेएस: 103: 7)

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

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

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

याद रखें, आपको इस कोड के सभी कोड मिलेगा जो मैंने आपको इस ट्यूटो

March 1, 2018