जेस्ट का उपयोग करके नेक्स्ट.जेएस एप्लिकेशन का परीक्षण कैसे करें

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

व्यापक परीक्षण लिखते समय जिसमें विभिन्न किनारे के मामले शामिल हैं, काफी समय लग सकता है, यह उत्पादन वातावरण तक पहुंचने से पहले समस्याओं को चिह्नित करने और हल करने में मदद करता है।

परीक्षण Next.js अनुप्रयोग

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

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

जेस्ट क्या है?

जेस्ट एक लोकप्रिय परीक्षण ढांचा है जिसका व्यापक रूप से विभिन्न द्वारा उपयोग किया जाता है जावास्क्रिप्ट ढांचे. यह एक शक्तिशाली परीक्षण धावक, स्वचालित मॉकिंग और स्नैपशॉट परीक्षण जैसी परीक्षण सुविधाओं का एक सूट प्रदान करता है।

आदर्श रूप से, ये सुविधाएँ व्यापक परीक्षण कवरेज प्राप्त करने और आपके आवेदन की विश्वसनीयता सुनिश्चित करने में काम आती हैं विभिन्न प्रकार के परीक्षण.

एक Next.js टू-डू एप्लिकेशन बनाएं

अब, आइए जेस्ट का उपयोग करके नेक्स्ट.जेएस एप्लिकेशन पर यूनिट टेस्ट चलाने की प्रक्रिया में तल्लीन करें। हालाँकि, शुरू करने से पहले, एक Next.js प्रोजेक्ट बनाएं और आवश्यक निर्भरताएँ स्थापित करें।

आरंभ करने के लिए, इन चरणों का पालन करें:

1. अपने टर्मिनल में निम्न कमांड चलाकर एक नया Next.js प्रोजेक्ट बनाएं:

   npx create-next-app@latest test-tutorial

2. प्रोजेक्ट बनाने के बाद, चलाकर प्रोजेक्ट डायरेक्टरी में नेविगेट करें:

   सीडी नेक्स्टजेएस-टेस्ट-ट्यूटोरियल

3. आवश्यक निर्भरताओं को इस रूप में स्थापित करें निर्भरता निम्न आदेश चलाकर:

   एनपीएम इंस्टॉल एनपीएम इंस्टॉल - सेव-देव जेस्ट @ टेस्टिंग-लाइब्रेरी/रिएक्ट @ टेस्टिंग-लाइब्रेरी/जेस्ट-डोम जेस्ट-एनवायरनमेंट-जेएसडीओएम

प्रोजेक्ट सेट अप और निर्भरता स्थापित होने के साथ, अब आप Next.js एप्लिकेशन बनाने और जेस्ट का उपयोग करके यूनिट परीक्षण लिखने के लिए तैयार हैं।

टू-डू घटक बनाएँ

में /src परियोजना निर्देशिका, खोलें पेज/इंडेक्स.जेएस फ़ाइल, मौजूदा बॉयलरप्लेट नेक्स्ट.जेएस कोड को हटा दें, और निम्न कोड जोड़ें।

सबसे पहले, निम्नलिखित आयात करें और दो कार्यों को परिभाषित करें जो उपयोगकर्ता टू-डॉस को प्रबंधित करेंगे: addTodo समारोह और हटाएंटोडो समारोह।

आयात {यूज़स्टेट} से"प्रतिक्रिया";
आयात शैलियों से"../styles/Home.module.css";
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट [todos, setTodos] = useState([]);
कॉन्स्ट [न्यूटोडो, सेटन्यूटोडो] = यूज़स्टेट ("");
कॉन्स्ट ऐड टोडो = () => {
अगर (newTodo.trim() !== "") {
कॉन्स्ट अपडेटेड टोडोस = [...टूडोस, न्यूटोडो];
 सेटटोडोस (अपडेटेड टोडोस);
 सेटन्यूटोडो("");
 }
 };
कॉन्स्ट डिलीट टोडो = (अनुक्रमणिका) => {
कॉन्स्ट अपडेटेड टोडोस = [...टूडोस];
 अपडेटेडटोडोस.स्प्लिस (सूचकांक, 1);
 सेटटोडोस (अपडेटेड टोडोस);
 };

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

अब, ब्राउज़र के DOM पर प्रदान किए गए JSX एलिमेंट्स के लिए कोड लिखें।

वापस करना (


 टाइप ="मूलपाठ"
 वर्गनाम = {शैलियों.इनपुट}
 मान = {नया टोडो}
 डेटा-टेस्टिड ="टूडू-इनपुट"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"ऐड-टूडू">
 टोडो जोड़ें
 </button>
"करने के लिए सूची">
 {todos.map((टूडू, इंडेक्स) => (


 {ऐसा करने के लिए}
 </li>
 ))}
 </ul>
 {todos.map((टूडू, इंडेक्स) => (


 onClick = {() => डिलीट टोडो (इंडेक्स)}
 वर्गनाम = {शैलियों.बटन}
 डेटा-टेस्टिड = {'हटाएं-टूडू-${सूचकांक}`}
 >
 मिटाना
 </button>
 </div>
 ))}
 </div>
 );}

लेखन परीक्षण मामले

परीक्षण केस लिखना शुरू करने से पहले, अपनी विशिष्ट परीक्षण आवश्यकताओं के अनुसार जेस्ट को कॉन्फ़िगर करना महत्वपूर्ण है। इसमें बनाना और अनुकूलित करना शामिल है jest.config.js फ़ाइल, जो आपके परीक्षण सेटअप की नींव के रूप में कार्य करती है।

रूट डायरेक्टरी में एक नया बनाएं jest.config.js फ़ाइल। फिर, तदनुसार जेस्ट को कॉन्फ़िगर करने के लिए निम्न कोड जोड़ें:

कॉन्स्ट अगला जेस्ट = ज़रूरत होना("अगला/मज़ाक");
कॉन्स्ट createJestConfig = nextJest({
 निदेशक: "./",
});
कॉन्स्ट कस्टमजेस्ट कॉन्फिग = {
 मॉड्यूल निर्देशिकाएँ: ["नोड_मॉड्यूल", "/"],
 परीक्षण का वातावरण: "मजाक-पर्यावरण-jsdom",
};
मापांक.exports = createJestConfig (customJestConfig);

अंत में, खोलें पैकेज.जेसन फ़ाइल और नामक एक नई स्क्रिप्ट जोड़ें परीक्षा जो कमांड को निष्पादित करेगा मज़ाक --watchAll सभी परीक्षण मामलों को चलाने और किसी भी बदलाव को देखने के लिए।

अपडेट करने के बाद, आपकी स्क्रिप्ट इस तरह दिखनी चाहिए:

"स्क्रिप्ट्स": {
"देव": "अगला देव",
"निर्माण": "अगला निर्माण",
"शुरू करना": "अगली शुरुआत",
"लिंट": "अगला लिंट",
"परीक्षा": "मजाक --घड़ी सब"
 },

कॉन्फ़िगरेशन के साथ, परीक्षण लिखने और निष्पादित करने के लिए आगे बढ़ें।

जेस्ट के साथ नेक्स्ट.जेएस टू-डू ऐप का परीक्षण

प्रोजेक्ट रूट डायरेक्टरी में, एक नया फोल्डर बनाएं, जिसे __परीक्षण__. जेस्ट इस फोल्डर में टेस्ट फाइलों को खोजेगा। इस फोल्डर के अंदर एक नई फाइल बनाएं, जिसका नाम है index.test.js.

सबसे पहले, निम्नलिखित आयात करें।

आयात घर से"../src/पेज/इंडेक्स";
आयात"@ टेस्टिंग-लाइब्रेरी/जेस्ट-डोम";
आयात {fireEvent, रेंडर, स्क्रीन, वेटफॉर, एक्ट} से"@ परीक्षण-पुस्तकालय/प्रतिक्रिया";

यह देखने के लिए एक परीक्षण लिखें कि क्या सभी तत्व सही तरीके से प्रस्तुत हो रहे हैं:

वर्णन करना("टोडो ऐप", () => {
 यह("टूडू ऐप प्रस्तुत करता है", () => {
 प्रदान करना(<घर />);

 उम्मीद (स्क्रीन.getByTestId("टूडू-इनपुट")).toBeInTheDocument();
 उम्मीद (स्क्रीन.getByTestId("ऐड-टूडू")).toBeInTheDocument();
 });
});

परीक्षण मामला सत्यापित करता है कि टू-डू ऐप और उसके तत्व सही ढंग से प्रस्तुत होते हैं। परीक्षण मामले के अंदर, घर घटक का उपयोग करके प्रदान किया जाता है प्रदान करना परीक्षण पुस्तकालय से कार्य।

फिर, का उपयोग करके दावे किए जाते हैं अपेक्षा करना यह सुनिश्चित करने के लिए कार्य करें कि परीक्षण आईडी वाले विशिष्ट तत्व, जैसे टूडू-इनपुट प्रदान किए गए आउटपुट में मौजूद हैं। यदि ये तत्व DOM में पाए जाते हैं, तो परीक्षण पास हो जाता है; अन्यथा, यह विफल रहता है।

अब, परीक्षण को निष्पादित करने के लिए निम्न कमांड चलाएँ।

एनपीएम रन टेस्ट

यदि परीक्षण पास हो जाता है तो आपको इसी तरह की प्रतिक्रिया देखनी चाहिए।

विभिन्न क्रियाओं का परीक्षण करना और त्रुटियों का अनुकरण करना

टू-डू जोड़ें और टू-डू सुविधाओं को हटाएं की कार्यक्षमता को सत्यापित करने के लिए इन परीक्षण मामलों का वर्णन करें।

ऐड-टू-डू कार्यक्षमता के लिए टेस्ट केस लिखकर प्रारंभ करें।

 यह("एक टूडू जोड़ता है", async () => {
 प्रदान करना(<घर />);

कॉन्स्ट todoInput = स्क्रीन.getByTestId("टूडू-इनपुट");
कॉन्स्ट AddTodo बटन = स्क्रीन.getByTestId ("ऐड-टूडू");
कॉन्स्ट todoList = स्क्रीन.getByTestId("करने के लिए सूची");
इंतजार कार्य(async () => {
 fireEvent.change (todoInput, { लक्ष्य: { कीमत: "नया टोडो" } });
 AddTodo बटन क्लिक करें ();
 });
इंतजार के लिए इंतजार(() => {
 अपेक्षा (todoList).toHaveTextContent ("नया टोडो");
 });
 });

उपरोक्त कोड स्निपेट इनपुट फ़ील्ड में टाइप करके और ऐड बटन पर क्लिक करके उपयोगकर्ता इंटरैक्शन को अनुकरण करता है। फिर, नकली टू-डू इनपुट वैल्यू का उपयोग करके, यह सत्यापित करता है कि इनपुट वैल्यू टू-डू सूची में सफलतापूर्वक जोड़ा गया है या नहीं।

फ़ाइल सहेजें और टर्मिनल की जाँच करें। परीक्षण स्वचालित रूप से फिर से चलाएँ और समान परीक्षा परिणाम लॉग आउट करें।

एक परीक्षण त्रुटि का अनुकरण करने के लिए, ऐड बटन टेस्ट आईडी को संशोधित करें और परीक्षण को फिर से चलाएँ। इस अद्यतन के साथ, परीक्षण विफल होना चाहिए और विशिष्ट त्रुटि का संकेत देने वाले त्रुटि संदेश को लॉग आउट करना चाहिए।

आदर्श रूप से, एक बड़े कोडबेस में जिसमें कई योगदानकर्ता बार-बार बदलाव करते हैं, परीक्षण संभावित बग की पहचान करने में महत्वपूर्ण भूमिका निभाता है जो सिस्टम विफलताओं का कारण बन सकता है। परीक्षण करके, आप आसानी से विसंगतियों को चिह्नित कर सकते हैं, जैसा कि ऊपर दिखाया गया है, और विकास के दौरान उन्हें हल कर सकते हैं।

अंत में, डिलीट टू-डू कार्यक्षमता के लिए टेस्ट केस लिखें।

 यह("एक टूडू को हटाता है", async () => {
 प्रदान करना(<घर />);

कॉन्स्ट todoInput = स्क्रीन.getByTestId("टूडू-इनपुट");
कॉन्स्ट AddTodo बटन = स्क्रीन.getByTestId ("ऐड-टूडू");

 fireEvent.change (todoInput, { लक्ष्य: { कीमत: "टूडू 1" } });
 fireEvent.क्लिक (AddTodoButton);

कॉन्स्ट डिलीटटोडोबटन = स्क्रीन.गेटबायटेस्टआईडी("डिलीट-टूडू-0");
 fireEvent.क्लिक (DeleteTodoButton);

कॉन्स्ट todoList = स्क्रीन.getByTestId("करने के लिए सूची");
इंतजार के लिए इंतजार(() => {
 उम्मीद (todoList).toBeEmptyDOMElement();
 });
 });

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

यूनिट परीक्षण जेस्ट का उपयोग करना

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

इसके अलावा, आप स्नैपशॉट परीक्षण और एंड-टू-एंड परीक्षण शामिल करके अपने परीक्षण दृष्टिकोण को बढ़ा सकते हैं।