परीक्षण प्रतिक्रिया घटक जेस्ट और प्रतिक्रिया परीक्षण पुस्तकालय का उपयोग कर

लेखन परीक्षण थकाऊ और दोहराव वाले हो सकते हैं। आपको ऐसा लग सकता है कि आप अपना कीमती समय बर्बाद कर रहे हैं बल्कि सुविधाओं पर काम करने के लिए उपयोग करेंगे। हालाँकि, यदि आप उन अनुप्रयोगों को शिप करना चाहते हैं जिन पर आप विश्वास करते हैं, तो आपको परीक्षण लिखना चाहिए।

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

आप जेस्ट और रिएक्ट टेस्टिंग लाइब्रेरी का उपयोग करके आसानी से रिएक्ट में टेस्ट लिख सकते हैं।

प्रतिक्रिया में आपको क्या परीक्षण करना चाहिए?

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

इसके बजाय, आपको केवल अंतिम-उपयोगकर्ता कार्यान्वयन का परीक्षण करना चाहिए। इसका मतलब यह है कि आपके ऐप की आंतरिक कार्यप्रणाली का परीक्षण करने के बजाय अंतिम उपयोगकर्ता आपके एप्लिकेशन का उपयोग कैसे करेगा, इसका परीक्षण करना है।

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

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

एक बटन घटक का परीक्षण

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

में एक नई फ़ाइल बनाएँ एसआरसी फ़ोल्डर कहा जाता है Button.js और निम्नलिखित कोड जोड़ें।

समारोहबटन({मूल्य}) {
वापसी (
<बटन>{मूल्य}</button>
 )
}
निर्यात करनाचूक बटन

Button.js मूल्य नामक एक प्रोप को स्वीकार करता है और इसे बटन मान के रूप में उपयोग करता है।

अपना पहला टेस्ट लिखना

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

नामक एक नई फ़ाइल बनाएँ Button.test.js src फ़ोल्डर में। डिफ़ॉल्ट रूप से, जेस्ट प्रत्यय वाली फाइलों की पहचान करता है .टेस्ट.जेएस परीक्षण फ़ाइलों के रूप में और स्वचालित रूप से उन्हें चलाता है। एक अन्य विकल्प यह है कि आप अपनी परीक्षण फ़ाइलों को __ नामक फ़ोल्डर में जोड़ेंपरीक्षण__.

पहला परीक्षण बनाने के लिए Button.test.js में निम्न कोड जोड़ें।

आयात { प्रदान करना } से '@ परीक्षण-पुस्तकालय/प्रतिक्रिया';
आयात बटन से '../बटन';
वर्णन करना('बटन घटक', () => { 
 परीक्षण('दुर्घटनाग्रस्त हुए बिना बटन घटक प्रस्तुत करता है', () => {
 प्रदान करना(<बटन />);
 }); 
})

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

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

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

बटन खोजने के लिए भूमिकाओं का उपयोग करना

कभी-कभी आप जांचना चाहते हैं कि क्या तत्व माउंट किया गया था। स्क्रीन विधि में getByRole() फ़ंक्शन है जिसका उपयोग आप DOM से किसी तत्व को हथियाने के लिए कर सकते हैं।

स्क्रीन.गेटबायरोल ('बटन')

फिर आप उस तत्व का उपयोग कर सकते हैं जिसे आपने परीक्षण करने के लिए पकड़ा है जैसे यह जांचना कि यह दस्तावेज़ में मौजूद है या सही ढंग से प्रस्तुत किया गया था।

getByRole() उन कई प्रश्नों में से एक है जिनका उपयोग आप किसी घटक में तत्वों का चयन करने के लिए कर सकते हैं। The. में अन्य प्रकार के प्रश्नों की जाँच करें प्रतिक्रिया परीक्षण पुस्तकालय "मुझे किस प्रश्न का उपयोग करना चाहिए" मार्गदर्शिका। इसके अलावा "बटन" भूमिका के अलावा, अधिकांश अर्थपूर्ण HTML तत्व निहित भूमिकाएँ हैं जिनका उपयोग आप अपने प्रश्नों को करने के लिए कर सकते हैं। से भूमिकाओं की सूची प्राप्त करें एमडीएन दस्तावेज़.

घटक रेंडरर्स को सत्यापित करने के लिए परीक्षण ब्लॉक में निम्नलिखित जोड़ें।

परीक्षण('दुर्घटनाग्रस्त हुए बिना रेंडर बटन', () => {
 प्रदान करना(<बटन मान ="साइन अप करें" />);
 उम्मीद (स्क्रीन.getByRole('बटन')).toBeInTheDocument()
});

ToBeInTheDocument() मिलानकर्ता यह जांचता है कि दस्तावेज़ में बटन तत्व मौजूद है या नहीं।

बटन को सही ढंग से प्रस्तुत करने की अपेक्षा करें

बटन घटक एक प्रोप मान स्वीकार करता है और इसे प्रदर्शित करता है। इसे सही ढंग से प्रस्तुत करने के लिए, यह जो मान प्रदर्शित करता है वह वही होना चाहिए जो आपने पास किया था।

एक नया टेस्ट ब्लॉक बनाएं और निम्नलिखित कोड जोड़ें।

परीक्षण('बटन सही ढंग से प्रस्तुत करता है', () => {
 प्रदान करना(<बटन मान ="लॉग इन करें" />);
 उम्मीद (स्क्रीन.getByRole('बटन')).toHaveTextContent ("लॉग इन करें")
})

ध्यान दें कि रिएक्ट टेस्टिंग लाइब्रेरी का उपयोग करते समय आपको परीक्षण के बाद सफाई करने की आवश्यकता नहीं है। पिछले संस्करणों में, आपको इस तरह सफाई मैन्युअल रूप से करने की आवश्यकता होगी:

प्रत्येक के बाद (सफाई)

अब, परीक्षण पुस्तकालय प्रत्येक रेंडर के बाद घटकों को स्वचालित रूप से अनमाउंट करता है।

स्नैपशॉट परीक्षण बनाना

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

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

जब भी आप यह सुनिश्चित करना चाहते हैं कि आपका UI अप्रत्याशित रूप से नहीं बदलता है तो स्नैपशॉट परीक्षण बहुत उपयोगी होते हैं।

स्नैपशॉट परीक्षण यूनिट परीक्षणों से अलग है क्योंकि स्नैपशॉट बनाने के लिए आपके पास पहले से ही काम करने वाला कोड होना चाहिए।

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

NPM इंस्टॉल प्रतिक्रिया-परीक्षण-रेंडरर

Button.test.js में, स्नैपशॉट परीक्षण इस प्रकार लिखें:

परीक्षण('स्नैपशॉट से मेल खाता है', () => {
 कास्ट ट्री = रेंडरर। क्रिएट (<बटन मान ="लॉग इन करें" />).toJSON ();
अपेक्षा करना(पेड़).toMatchस्नैपशॉट();
})

बटन घटक के लिए कोई मौजूदा स्नैपशॉट नहीं है, इसलिए इस परीक्षण को चलाने से परीक्षण फ़ाइल के साथ एक स्नैपशॉट फ़ाइल बन जाएगी:

बटन
__परीक्षण__
│ │ बटनपरीक्षण.जेएस
__स्नैपशॉट__
│ │ बटन।परीक्षण.जेएस।चटकाना
│ 
└─── बटन.जेएस

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

सबसे अधिक उपयोग किए जाने वाले घटकों के लिए परीक्षण लिखें

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

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