Next.js 15 पूर्ण-स्टैक वेब ऐप · पाठ

यूनिट और इंटीग्रेशन परीक्षण

Jest और React Testing Library का उपयोग करके React कंपोनेंट और Next.js फ़ंक्शन के प्रभावी यूनिट और इंटीग्रेशन परीक्षण लिखिए।

पाठ 1, कुल 4 में से12 चरण

यूनिट और इंटीग्रेशन परीक्षण, CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 पूर्ण-स्टैक वेब ऐप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

हम अपने कोड का परीक्षण क्यों करते हैं

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

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

हम यूनिट परीक्षण (छोटे, अलग-अलग हिस्से) और इंटीग्रेशन परीक्षण (हिस्से एक साथ कैसे काम करते हैं) पर ध्यान देंगे।

Jest और RTL सेट अप करना

Jest एक लोकप्रिय JavaScript परीक्षण फ़्रेमवर्क है और React Testing Library (RTL) React घटकों के परीक्षण के लिए उपयोगिताओं का एक समूह है। साथ मिलकर, ये Next.js ऐप के लिए एक शक्तिशाली जोड़ी बनाते हैं।

पहले आवश्यक पैकेज इंस्टॉल करें:

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

आपका पहला यूनिट परीक्षण (फ़ंक्शन)

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

यह हमारी उपयोगिता है:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

'add' फ़ंक्शन का परीक्षण

अब अपने add फ़ंक्शन के लिए परीक्षण लिखते हैं। Jest परीक्षणों को समूहित करने के लिए describe और अलग-अलग परीक्षण मामलों के लिए test (या it) का उपयोग करता है। दावे करने के लिए expect का उपयोग किया जाता है।

इसे utils/math.test.js में सहेजें:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

React Testing Library का परिचय

React Testing Library (RTL) ऐसे घटकों का परीक्षण करने के लिए प्रोत्साहित करती है, जो उपयोगकर्ता के साथ होने वाली वास्तविक सहभागिता जैसी हो। आंतरिक स्थिति की जाँच करने के बजाय, आप उन एलिमेंट के लिए DOM में खोज करते हैं जिन्हें उपयोगकर्ता देखेगा या जिनसे सहभागिता करेगा।

render: किसी React घटक को वर्चुअल DOM में माउंट करता है।
screen: रेंडर किए गए DOM में खोज करने के लिए विधियाँ उपलब्ध कराता है (जैसे, getByText, getByRole)।
@testing-library/jest-dom: toBeInTheDocument जैसे कस्टम मिलानकर्ता जोड़ता है।

एक सरल React घटक का परीक्षण

आइए एक सामान्य बटन घटक का परीक्षण करें। हम सुनिश्चित करेंगे कि वह सही टेक्स्ट के साथ रेंडर हो।

पहले, घटक (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

घटक रेंडरिंग का परीक्षण

अब हमारे Button घटक का परीक्षण करते हैं। हम उसे स्क्रीन पर लाने के लिए render और उसे खोजने के लिए screen.getByText का उपयोग करते हैं, फिर उसकी मौजूदगी की पुष्टि toBeInTheDocument से करते हैं।

इसे components/Button.test.jsx के रूप में सहेजें:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with the correct label', () => {
    render(<Button label="Click Me" />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

उपयोगकर्ता की सहभागिताओं का अनुकरण

केवल रेंडरिंग ही पर्याप्त नहीं है; हमें यह भी परीक्षण करना होगा कि घटक उपयोगकर्ता की कार्रवाइयों पर कैसे प्रतिक्रिया देते हैं। RTL का fireEvent (या अधिक वास्तविक सहभागिताओं के लिए userEvent) क्लिक, इनपुट में बदलाव आदि का अनुकरण करने में सहायता करता है।

हम जाँच सकते हैं कि प्रॉप्स के माध्यम से दिया गया फ़ंक्शन कॉल किया गया है या नहीं।

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

इंटीग्रेशन: रूट हैंडलर का परीक्षण

Next.js के रूट हैंडलर (App Router में API रूट) सर्वर-साइड फ़ंक्शन होते हैं। हम उन्हें सीधे इम्पोर्ट करके और उनकी HTTP विधियों (जैसे GET, POST) को कॉल करके, तथा Next.js के अनुरोध/प्रतिक्रिया ऑब्जेक्ट का मॉक बनाकर परीक्षण कर सकते हैं।

यहाँ एक उदाहरण है:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

प्रभावी परीक्षणों की सर्वोत्तम प्रथाएँ

उपयोगी और रखरखाव योग्य परीक्षण लिखने के लिए:

उपयोगकर्ता के व्यवहार का परीक्षण करें: घटक की आंतरिक स्थिति पर नहीं, बल्कि उपयोगकर्ता क्या देखता और करता है, इस पर ध्यान दें।
परीक्षणों को केंद्रित रखें: प्रत्येक परीक्षण को आदर्श रूप से एक ही चीज़ की जाँच करनी चाहिए।
परीक्षण तेज़ रखें: धीमे परीक्षणों को बार-बार चलाने में रुचि कम हो जाती है।
पठनीयता: ऐसे स्पष्ट परीक्षण लिखें जिन्हें समझना आसान हो।
निर्भरताओं का मॉक बनाएँ: यूनिट को अलग रखने और बाहरी कारकों को परीक्षणों को प्रभावित करने से रोकने के लिए jest.mock() या jest.fn() का उपयोग करें।

त्वरित जाँच

Jest और React Testing Library के साथ Next.js में परीक्षण के बारे में निम्नलिखित में से कौन-सा कथन TRUE है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: यूनिट और इंटीग्रेशन परीक्षण

बहुत अच्छा! आपने Next.js में यूनिट और इंटीग्रेशन परीक्षण की मूल बातें सीख ली हैं:

Jest आपका परीक्षण फ़्रेमवर्क है।
React Testing Library उपयोगकर्ता की तरह घटकों का परीक्षण करने में सहायता करती है।
यूनिट परीक्षण छोटे, अलग-अलग कोड यूनिट की पुष्टि करते हैं।
इंटीग्रेशन परीक्षण जाँचते हैं कि अलग-अलग हिस्से (जैसे घटक और API) एक साथ कैसे काम करते हैं।
आप फ़ंक्शन, React घटक और Next.js रूट हैंडलर का परीक्षण कर सकते हैं।
सर्वोत्तम प्रथाओं में उपयोगकर्ता के व्यवहार पर ध्यान देना और निर्भरताओं का मॉक बनाना शामिल है।

अब हम पूरे एप्लिकेशन प्रवाह के लिए एंड-टू-एंड परीक्षण देखेंगे!

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “यूनिट और इंटीग्रेशन परीक्षण” पाठ निःशुल्क है?

हाँ — Next.js 15 पूर्ण-स्टैक वेब ऐप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “यूनिट और इंटीग्रेशन परीक्षण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“यूनिट और इंटीग्रेशन परीक्षण” में मैं क्या सीखूँगा?

Jest और React Testing Library का उपयोग करके React कंपोनेंट और Next.js फ़ंक्शन के प्रभावी यूनिट और इंटीग्रेशन परीक्षण लिखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 पूर्ण-स्टैक वेब ऐप का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 पूर्ण-स्टैक वेब ऐप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“यूनिट और इंटीग्रेशन परीक्षण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Next.js 15 पूर्ण-स्टैक वेब ऐप पर वापस जाएँ