React कंपोनेंट टेस्टिंग: स्नैपशॉट और इंटीग्रेशन टेस्ट में महारत हासिल करना

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

React कंपोनेंट्स का परीक्षण क्यों करें?

स्नैपशॉट और इंटीग्रेशन टेस्टिंग की बारीकियों में जाने से पहले, आइए पहले समझते हैं कि React कंपोनेंट्स का परीक्षण करना इतना महत्वपूर्ण क्यों है:

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

स्नैपशॉट टेस्टिंग

स्नैपशॉट टेस्टिंग क्या है?

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

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

स्नैपशॉट टेस्टिंग को कैसे लागू करें

हम स्नैपशॉट टेस्टिंग को प्रदर्शित करने के लिए Jest, एक लोकप्रिय जावास्क्रिप्ट टेस्टिंग फ्रेमवर्क और Enzyme (या React टेस्टिंग लाइब्रेरी - नीचे देखें) का उपयोग करेंगे।

Jest और Enzyme के साथ उदाहरण (अस्वीकरण सूचना):

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

सबसे पहले, Jest और Enzyme को इंस्टॉल करें:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

अपने React संस्करण के लिए उपयुक्त एडेप्टर के साथ `react-adapter-react-16` को बदलें।

एक सरल React कंपोनेंट बनाएं (जैसे, Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

अब, एक स्नैपशॉट टेस्ट बनाएं (जैसे, Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Jest का उपयोग करके परीक्षण चलाएँ:

            npm test

            

              
                Copy
              
            
          

पहली बार जब आप परीक्षण चलाते हैं, तो Jest एक स्नैपशॉट फ़ाइल बनाएगा (जैसे, __snapshots__/Greeting.test.js.snap) जिसमें Greeting कंपोनेंट का रेंडर किया गया आउटपुट होगा।

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

Jest और React टेस्टिंग लाइब्रेरी के साथ उदाहरण:

React टेस्टिंग लाइब्रेरी React कंपोनेंट्स के परीक्षण के लिए एक अधिक आधुनिक और अनुशंसित दृष्टिकोण है। यह कार्यान्वयन विवरणों पर ध्यान केंद्रित करने के बजाय, उपयोगकर्ता के दृष्टिकोण से कंपोनेंट का परीक्षण करने पर केंद्रित है।

सबसे पहले, Jest और React टेस्टिंग लाइब्रेरी को इंस्टॉल करें:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

स्नैपशॉट टेस्ट को संशोधित करें (जैसे, Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Jest का उपयोग करके परीक्षण चलाएँ:

            npm test

            

              
                Copy
              
            
          

पहली बार जब आप परीक्षण चलाते हैं, तो Jest एक स्नैपशॉट फ़ाइल बनाएगा (जैसे, __snapshots__/Greeting.test.js.snap) जिसमें Greeting कंपोनेंट का रेंडर किया गया आउटपुट होगा।

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

स्नैपशॉट टेस्टिंग के लिए सर्वोत्तम अभ्यास

• स्नैपशॉट को कोड के रूप में मानें: अपनी स्नैपशॉट फ़ाइलों को अपनी संस्करण नियंत्रण प्रणाली (जैसे, Git) में किसी अन्य कोड फ़ाइल की तरह ही कमिट करें।
• परिवर्तनों की सावधानीपूर्वक समीक्षा करें: जब कोई स्नैपशॉट परीक्षण विफल हो जाता है, तो यह निर्धारित करने के लिए स्नैपशॉट फ़ाइल में परिवर्तनों की सावधानीपूर्वक समीक्षा करें कि वे जानबूझकर हैं या किसी बग का संकेत देते हैं।
• जानबूझकर स्नैपशॉट अपडेट करें: यदि परिवर्तन जानबूझकर हैं, तो नए अपेक्षित आउटपुट को प्रतिबिंबित करने के लिए स्नैपशॉट फ़ाइल को अपडेट करें।
• स्नैपशॉट का अधिक उपयोग न करें: स्नैपशॉट टेस्टिंग अपेक्षाकृत स्थिर UI वाले कंपोनेंट्स के लिए सबसे उपयुक्त है। इसका उपयोग उन कंपोनेंट्स के लिए करने से बचें जो बार-बार बदलते हैं, क्योंकि इससे बहुत सारे अनावश्यक स्नैपशॉट अपडेट हो सकते हैं।
• पठनीयता पर विचार करें: कभी-कभी स्नैपशॉट फ़ाइलों को पढ़ना मुश्किल हो सकता है। बेहतर पठनीयता के लिए अपनी स्नैपशॉट फ़ाइलों को प्रारूपित करने के लिए Prettier जैसे टूल का उपयोग करें।

स्नैपशॉट टेस्टिंग का उपयोग कब करें

स्नैपशॉट टेस्टिंग निम्नलिखित परिदृश्यों में सबसे प्रभावी है:

• सरल कंपोनेंट्स: अनुमानित आउटपुट वाले सरल कंपोनेंट्स का परीक्षण करना।
• UI लाइब्रेरी: विभिन्न संस्करणों में UI कंपोनेंट्स की दृश्य स्थिरता को सत्यापित करना।
• रिग्रेशन टेस्टिंग: मौजूदा कंपोनेंट्स में अनपेक्षित परिवर्तनों का पता लगाना।

इंटीग्रेशन टेस्टिंग

इंटीग्रेशन टेस्टिंग क्या है?

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

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

इंटीग्रेशन टेस्टिंग को कैसे लागू करें

हम इंटीग्रेशन टेस्टिंग को प्रदर्शित करने के लिए फिर से Jest और React टेस्टिंग लाइब्रेरी का उपयोग करेंगे।

आइए दो कंपोनेंट्स के साथ एक सरल एप्लिकेशन बनाएं: Input और Display। Input कंपोनेंट उपयोगकर्ता को टेक्स्ट दर्ज करने की अनुमति देता है, और Display कंपोनेंट दर्ज किए गए टेक्स्ट को प्रदर्शित करता है।

सबसे पहले, Input कंपोनेंट बनाएं (जैसे, Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Enter text..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

अगला, Display कंपोनेंट बनाएं (जैसे, Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>You entered: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

अब, मुख्य App कंपोनेंट बनाएं जो Input और Display कंपोनेंट्स को एकीकृत करता है (जैसे, App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

एक इंटीग्रेशन टेस्ट बनाएं (जैसे, App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App Component', () => {
  it('updates the display when the input changes', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Enter text...');
    const displayElement = screen.getByText('You entered: ');

    fireEvent.change(inputElement, { target: { value: 'Hello, world!' } });

    expect(displayElement).toHaveTextContent('You entered: Hello, world!');
  });
});

            

              
                Copy
              
            
          

Jest का उपयोग करके परीक्षण चलाएँ:

            npm test

            

              
                Copy
              
            
          

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

इंटीग्रेशन टेस्टिंग के लिए सर्वोत्तम अभ्यास

• प्रमुख इंटरैक्शन पर ध्यान दें: कंपोनेंट्स के बीच सबसे महत्वपूर्ण इंटरैक्शन की पहचान करें और उन पर अपने इंटीग्रेशन परीक्षणों को केंद्रित करें।
• यथार्थवादी डेटा का उपयोग करें: वास्तविक दुनिया के परिदृश्यों का अनुकरण करने के लिए अपने इंटीग्रेशन परीक्षणों में यथार्थवादी डेटा का उपयोग करें।
• बाहरी निर्भरताओं को मॉक करें: अपने कंपोनेंट्स को अलग करने और अपने परीक्षणों को अधिक विश्वसनीय बनाने के लिए किसी भी बाहरी निर्भरता (जैसे, API कॉल) को मॉक करें। `msw` (मॉक सर्विस वर्कर) जैसी लाइब्रेरी इसके लिए उत्कृष्ट हैं।
• स्पष्ट और संक्षिप्त परीक्षण लिखें: स्पष्ट और संक्षिप्त परीक्षण लिखें जिन्हें समझना और बनाए रखना आसान हो।
• उपयोगकर्ता प्रवाह का परीक्षण करें: यह सुनिश्चित करने के लिए कि आपका एप्लिकेशन उपयोगकर्ता के दृष्टिकोण से अपेक्षित व्यवहार करता है, पूर्ण उपयोगकर्ता प्रवाह का परीक्षण करने पर ध्यान केंद्रित करें।

इंटीग्रेशन टेस्टिंग का उपयोग कब करें

इंटीग्रेशन टेस्टिंग निम्नलिखित परिदृश्यों में सबसे प्रभावी है:

• जटिल कंपोनेंट्स: जटिल कंपोनेंट्स का परीक्षण करना जो अन्य कंपोनेंट्स या बाहरी सिस्टम के साथ बातचीत करते हैं।
• उपयोगकर्ता प्रवाह: यह सत्यापित करना कि पूर्ण उपयोगकर्ता प्रवाह सही ढंग से काम कर रहा है।
• API इंटरैक्शन: अपने फ्रंटएंड और बैकएंड API के बीच एकीकरण का परीक्षण करना।

स्नैपशॉट टेस्टिंग बनाम इंटीग्रेशन टेस्टिंग: एक तुलना

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

सही टेस्टिंग रणनीति चुनना

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

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

स्नैपशॉट और इंटीग्रेशन परीक्षणों से परे

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

• यूनिट परीक्षण: जैसा कि पहले उल्लेख किया गया है, यूनिट परीक्षण अलगाव में व्यक्तिगत कंपोनेंट्स का परीक्षण करने के लिए आवश्यक हैं।
• एंड-टू-एंड (E2E) परीक्षण: E2E परीक्षण वास्तविक उपयोगकर्ता इंटरैक्शन का अनुकरण करते हैं और समग्र एप्लिकेशन व्यवहार को सत्यापित करते हैं।
• संपत्ति-आधारित परीक्षण: संपत्ति-आधारित परीक्षण में उन गुणों को परिभाषित करना शामिल है जो आपके कंपोनेंट्स के लिए हमेशा सत्य होने चाहिए और फिर उन गुणों का परीक्षण करने के लिए यादृच्छिक इनपुट उत्पन्न करना।
• अभिगम्यता परीक्षण: अभिगम्यता परीक्षण यह सुनिश्चित करता है कि आपके कंपोनेंट्स विकलांग उपयोगकर्ताओं के लिए अभिगम्य हैं।

निष्कर्ष

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