परिचय

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

एसपीए का परीक्षण क्यों महत्वपूर्ण है?

एसपीए का परीक्षण कई कारणों से महत्वपूर्ण है:

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

एसपीए के लिए परीक्षण के प्रकार

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

1. यूनिट परीक्षण: यह सुनिश्चित करने के लिए कि वे अपेक्षा के अनुरूप व्यवहार करते हैं, अलग-अलग घटकों या कार्यों का अलग-अलग परीक्षण करें।
2. एकीकरण परीक्षण: यह सुनिश्चित करने के लिए कि वे एक साथ सही ढंग से काम करते हैं, कई घटकों या सेवाओं के बीच बातचीत का परीक्षण करें।
3. एंड-टू-एंड (ई2ई) परीक्षण: वास्तविक दुनिया के परिदृश्यों का अनुकरण करते हुए, उपयोगकर्ता के दृष्टिकोण से संपूर्ण एप्लिकेशन प्रवाह का परीक्षण करें।

एसपीए के परीक्षण के लिए उपकरण और रूपरेखा

कई उपकरण और ढांचे आपको एसपीए का प्रभावी ढंग से परीक्षण करने में मदद कर सकते हैं:

1. जेस्ट: जावास्क्रिप्ट के लिए एक लोकप्रिय परीक्षण ढांचा जो इकाई और एकीकरण परीक्षण के लिए अच्छा काम करता है।
2. रिएक्ट टेस्टिंग लाइब्रेरी: एक टेस्टिंग लाइब्रेरी जो उपयोगकर्ता इंटरैक्शन पर जोर देते हुए रिएक्ट घटकों के परीक्षण पर केंद्रित है।
3. Cypress: एक E2E परीक्षण ढांचा जो आपको एक बेहतरीन डेवलपर अनुभव प्रदान करते हुए सीधे ब्राउज़र में परीक्षण लिखने और चलाने की अनुमति देता है।
4. मोचा और चाय: एक लचीला परीक्षण ढांचा और अभिकथन पुस्तकालय जो इकाई और एकीकरण परीक्षण दोनों के लिए अच्छा काम करता है।
5. नाटककार: एक नया ई2ई परीक्षण उपकरण जो कई ब्राउज़रों का समर्थन करता है और जटिल एसपीए के परीक्षण के लिए अत्यधिक विश्वसनीय है।

एसपीए के लिए टेस्ट सूट बनाने के लिए चरण-दर-चरण मार्गदर्शिका

1. अपना परीक्षण वातावरण स्थापित करें
आरंभ करने के लिए, आवश्यक परीक्षण उपकरण और ढाँचे स्थापित करें। रिएक्ट एप्लिकेशन के लिए, आप जेस्ट, रिएक्ट टेस्टिंग लाइब्रेरी और साइप्रस इंस्टॉल कर सकते हैं:

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

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

// Button.js
import React from 'react';

function Button({ label, onClick }) {
  return {label};
}

export default Button;

// Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders the button with the correct label', () => {
  const { getByText } = render();
  expect(getByText('Click me')).toBeInTheDocument();
});

test('calls the onClick handler when clicked', () => {
  const handleClick = jest.fn();
  const { getByText } = render();

  fireEvent.click(getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

3. घटक इंटरैक्शन के लिए एकीकरण परीक्षण लिखें
एकीकरण परीक्षण यह सुनिश्चित करते हैं कि कई घटक अपेक्षा के अनुरूप एक साथ काम करते हैं। उदाहरण के लिए, एक फॉर्म घटक का परीक्षण करना जो राज्य प्रबंधन लाइब्रेरी के साथ इंटरैक्ट करता है:

// Form.js
import React, { useState } from 'react';

function Form() {
  const [input, setInput] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // handle form submission
  };

  return (
    

setInput(e.target.value)} /> Submit

); } export default Form;

// Form.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Form from './Form';

test('updates input value and handles form submission', () => {
  const { getByRole, getByDisplayValue } = render(

); const input = getByRole('textbox'); fireEvent.change(input, { target: { value: 'New value' } }); expect(getByDisplayValue('New value')).toBeInTheDocument(); const button = getByRole('button', { name: /submit/i }); fireEvent.click(button); // add more assertions as needed });

4. पूर्ण उपयोगकर्ता प्रवाह के लिए एंड-टू-एंड टेस्ट लिखें
E2E परीक्षण पूर्ण एप्लिकेशन प्रवाह को कवर करते हुए वास्तविक उपयोगकर्ता इंटरैक्शन का अनुकरण करते हैं। उदाहरण के लिए, लॉगिन प्रवाह का परीक्षण:

// cypress/integration/login.spec.js
describe('Login Flow', () => {
  it('allows a user to log in', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, testuser').should('be.visible');
  });
});

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

cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-jwt-token' } }).as('login');
cy.get('button[type="submit"]').click();
cy.wait('@login').its('response.statusCode').should('eq', 200);

6. पृथक परीक्षणों के लिए मॉकिंग और स्टबिंग का उपयोग करें
बाहरी निर्भरता से घटकों और कार्यों को अलग करने के लिए मॉकिंग और स्टबिंग आवश्यक हैं। जेस्ट में, आप मॉड्यूल और फ़ंक्शंस का अनुकरण करने के लिए jest.mock() का उपयोग कर सकते हैं:

// api.js
export const fetchData = () => {
  return fetch('/api/data').then(response => response.json());
};

// api.test.js
import { fetchData } from './api';

jest.mock('./api', () => ({
  fetchData: jest.fn(),
}));

test('fetchData makes a fetch call', () => {
  fetchData();
  expect(fetchData).toHaveBeenCalled();
});

7. परीक्षण प्रदर्शन को अनुकूलित करें
यह सुनिश्चित करने के लिए कि आपका परीक्षण सूट कुशलतापूर्वक चले, इन सर्वोत्तम प्रथाओं का पालन करें:

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

8. परीक्षणों को सीआई/सीडी पाइपलाइनों में एकीकृत करें
अपने परीक्षण सूट को सीआई/सीडी पाइपलाइन में एकीकृत करके अपनी परीक्षण प्रक्रिया को स्वचालित करें। यह सुनिश्चित करता है कि प्रत्येक कमिट या पुल अनुरोध पर परीक्षण स्वचालित रूप से चलते हैं, विकास प्रक्रिया में समस्याओं को जल्दी पकड़ लेते हैं।

गिटहब क्रियाओं के साथ उदाहरण:

name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Install Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npm test
    - run: npm run cypress:run

निष्कर्ष

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

खुश परीक्षण!