M

MLOG

हिन्दी

इस संपूर्ण गाइड के साथ रिएक्ट टेस्टिंग लाइब्रेरी (RTL) में महारत हासिल करें। सर्वोत्तम प्रथाओं और वास्तविक दुनिया के उदाहरणों पर ध्यान केंद्रित करते हुए, अपने रिएक्ट एप्लीकेशन के लिए प्रभावी, रखरखाव योग्य और उपयोगकर्ता-केंद्रित टेस्ट लिखना सीखें।

रिएक्ट टेस्टिंग लाइब्रेरी: एक व्यापक गाइड

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

रिएक्ट टेस्टिंग लाइब्रेरी क्यों चुनें?

पारंपरिक टेस्टिंग दृष्टिकोण अक्सर कार्यान्वयन विवरण (implementation details) पर निर्भर करते हैं, जिससे टेस्ट भंगुर (brittle) हो जाते हैं और मामूली कोड परिवर्तनों के साथ टूटने का खतरा होता है। दूसरी ओर, RTL आपको अपने कंपोनेंट्स का परीक्षण करने के लिए प्रोत्साहित करता है जैसे कोई उपयोगकर्ता उनके साथ इंटरैक्ट करेगा, इस बात पर ध्यान केंद्रित करते हुए कि उपयोगकर्ता क्या देखता और अनुभव करता है। यह दृष्टिकोण कई प्रमुख लाभ प्रदान करता है:

अपना टेस्टिंग वातावरण स्थापित करना

RTL का उपयोग शुरू करने से पहले, आपको अपना टेस्टिंग वातावरण स्थापित करना होगा। इसमें आम तौर पर आवश्यक निर्भरताएँ (dependencies) स्थापित करना और आपके टेस्टिंग फ्रेमवर्क को कॉन्फ़िगर करना शामिल है।

आवश्यक शर्तें

इंस्टॉलेशन

npm या yarn का उपयोग करके निम्नलिखित पैकेज इंस्टॉल करें:

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

या, yarn का उपयोग करके:

yarn add --dev @testing-library/react @testing-library/jest-dom jest babel-jest @babel/preset-env @babel/preset-react

पैकेजों की व्याख्या:

कॉन्फ़िगरेशन

अपने प्रोजेक्ट के रूट में निम्नलिखित सामग्री के साथ एक `babel.config.js` फ़ाइल बनाएं:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

एक टेस्ट स्क्रिप्ट शामिल करने के लिए अपनी `package.json` फ़ाइल को अपडेट करें:

{
  "scripts": {
    "test": "jest"
  }
}

Jest को कॉन्फ़िगर करने के लिए अपने प्रोजेक्ट के रूट में एक `jest.config.js` फ़ाइल बनाएं। एक न्यूनतम कॉन्फ़िगरेशन इस तरह दिख सकता है:

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

निम्नलिखित सामग्री के साथ एक `src/setupTests.js` फ़ाइल बनाएं। यह सुनिश्चित करता है कि Jest DOM मैचर्स आपके सभी टेस्ट में उपलब्ध हैं:

import '@testing-library/jest-dom/extend-expect';

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

आइए एक सरल उदाहरण से शुरू करें। मान लीजिए आपके पास एक रिएक्ट कंपोनेंट है जो एक अभिवादन संदेश प्रदर्शित करता है:

// src/components/Greeting.js
import React from 'react';

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

export default Greeting;

अब, आइए इस कंपोनेंट के लिए एक टेस्ट लिखें:

// src/components/Greeting.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting message', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

व्याख्या:

टेस्ट चलाने के लिए, अपने टर्मिनल में निम्नलिखित कमांड निष्पादित करें:

npm test

यदि सब कुछ सही ढंग से कॉन्फ़िगर किया गया है, तो टेस्ट पास हो जाना चाहिए।

सामान्य RTL क्वेरीज़

RTL DOM में तत्वों को खोजने के लिए विभिन्न क्वेरी विधियाँ प्रदान करता है। इन क्वेरीज़ को यह नकल करने के लिए डिज़ाइन किया गया है कि उपयोगकर्ता आपके एप्लीकेशन के साथ कैसे इंटरैक्ट करते हैं।

`getByRole`

यह क्वेरी किसी तत्व को उसके ARIA रोल द्वारा ढूंढती है। जब भी संभव हो `getByRole` का उपयोग करना एक अच्छा अभ्यास है, क्योंकि यह पहुंच को बढ़ावा देता है और सुनिश्चित करता है कि आपके टेस्ट अंतर्निहित DOM संरचना में परिवर्तनों के प्रति लचीले हैं।

<button role="button">Click me</button>

const buttonElement = screen.getByRole('button');
expect(buttonElement).toBeInTheDocument();

`getByLabelText`

यह क्वेरी किसी तत्व को उसके संबंधित लेबल के टेक्स्ट द्वारा ढूंढती है। यह फॉर्म तत्वों के परीक्षण के लिए उपयोगी है।

<label htmlFor="name">Name:</label>
<input type="text" id="name" />

const nameInputElement = screen.getByLabelText('Name:');
expect(nameInputElement).toBeInTheDocument();

`getByPlaceholderText`

यह क्वेरी किसी तत्व को उसके प्लेसहोल्डर टेक्स्ट द्वारा ढूंढती है।

<input type="text" placeholder="Enter your email" />

const emailInputElement = screen.getByPlaceholderText('Enter your email');
expect(emailInputElement).toBeInTheDocument();

`getByAltText`

यह क्वेरी एक इमेज तत्व को उसके ऑल्ट टेक्स्ट द्वारा ढूंढती है। पहुंच सुनिश्चित करने के लिए सभी छवियों के लिए सार्थक ऑल्ट टेक्स्ट प्रदान करना महत्वपूर्ण है।

<img src="logo.png" alt="Company Logo" />

const logoImageElement = screen.getByAltText('Company Logo');
expect(logoImageElement).toBeInTheDocument();

`getByTitle`

यह क्वेरी किसी तत्व को उसके टाइटल एट्रिब्यूट द्वारा ढूंढती है।

<span title="Close">X</span>

const closeElement = screen.getByTitle('Close');
expect(closeElement).toBeInTheDocument();

`getByDisplayValue`

यह क्वेरी किसी तत्व को उसके डिस्प्ले वैल्यू द्वारा ढूंढती है। यह पहले से भरे मानों वाले फॉर्म इनपुट के परीक्षण के लिए उपयोगी है।

<input type="text" value="Initial Value" />

const inputElement = screen.getByDisplayValue('Initial Value');
expect(inputElement).toBeInTheDocument();

`getAllBy*` क्वेरीज़

`getBy*` क्वेरीज़ के अलावा, RTL `getAllBy*` क्वेरीज़ भी प्रदान करता है, जो मिलान करने वाले तत्वों की एक सरणी लौटाते हैं। ये तब उपयोगी होते हैं जब आपको यह दावा करने की आवश्यकता होती है कि समान विशेषताओं वाले कई तत्व DOM में मौजूद हैं।

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

const listItems = screen.getAllByRole('listitem');
expect(listItems).toHaveLength(3);

`queryBy*` क्वेरीज़

`queryBy*` क्वेरीज़ `getBy*` क्वेरीज़ के समान हैं, लेकिन यदि कोई मिलान तत्व नहीं मिलता है तो वे एक त्रुटि फेंकने के बजाय `null` लौटाते हैं। यह तब उपयोगी होता है जब आप यह दावा करना चाहते हैं कि कोई तत्व DOM में मौजूद *नहीं* है।

const missingElement = screen.queryByText('Non-existent text');
expect(missingElement).toBeNull();

`findBy*` क्वेरीज़

`findBy*` क्वेरीज़ `getBy*` क्वेरीज़ के एसिंक्रोनस संस्करण हैं। वे एक प्रॉमिस लौटाते हैं जो मिलान तत्व मिलने पर हल हो जाता है। ये एसिंक्रोनस संचालन के परीक्षण के लिए उपयोगी हैं, जैसे किसी API से डेटा प्राप्त करना।

// Simulating an asynchronous data fetch
const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve('Data Loaded!'), 1000);
});

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

test('loads data asynchronously', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText('Data Loaded!');
  expect(dataElement).toBeInTheDocument();
});

उपयोगकर्ता इंटरैक्शन का अनुकरण

RTL उपयोगकर्ता इंटरैक्शन का अनुकरण करने के लिए `fireEvent` और `userEvent` API प्रदान करता है, जैसे बटन क्लिक करना, इनपुट फ़ील्ड में टाइप करना और फॉर्म सबमिट करना।

`fireEvent`

`fireEvent` आपको प्रोग्रामेटिक रूप से DOM ईवेंट्स को ट्रिगर करने की अनुमति देता है। यह एक निम्न-स्तरीय API है जो आपको फायर किए जाने वाले ईवेंट्स पर बारीक नियंत्रण देता है।

<button onClick={() => alert('Button clicked!')}>Click me</button>

import { fireEvent } from '@testing-library/react';

test('simulates a button click', () => {
  const alertMock = jest.spyOn(window, 'alert').mockImplementation(() => {});
  render(<button onClick={() => alert('Button clicked!')}>Click me</button>);
  const buttonElement = screen.getByRole('button');
  fireEvent.click(buttonElement);
  expect(alertMock).toHaveBeenCalledTimes(1);
  alertMock.mockRestore();
});

`userEvent`

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

<input type="text" onChange={e => console.log(e.target.value)} />

import userEvent from '@testing-library/user-event';

test('simulates typing in an input field', () => {
  const inputElement = screen.getByRole('textbox');
  userEvent.type(inputElement, 'Hello, world!');
  expect(inputElement).toHaveValue('Hello, world!');
});

एसिंक्रोनस कोड का परीक्षण

कई रिएक्ट एप्लीकेशन में एसिंक्रोनस संचालन शामिल होते हैं, जैसे किसी API से डेटा प्राप्त करना। RTL एसिंक्रोनस कोड के परीक्षण के लिए कई उपकरण प्रदान करता है।

`waitFor`

`waitFor` आपको एक दावा करने से पहले एक शर्त के सच होने की प्रतीक्षा करने की अनुमति देता है। यह उन एसिंक्रोनस संचालनों के परीक्षण के लिए उपयोगी है जिन्हें पूरा होने में कुछ समय लगता है।

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    setTimeout(() => {
      setData('Data loaded!');
    }, 1000);
  }, []);

  return <div>{data}</div>;
}

import { waitFor } from '@testing-library/react';

test('waits for data to load', async () => {
  render(<MyComponent />);
  await waitFor(() => screen.getByText('Data loaded!'));
  const dataElement = screen.getByText('Data loaded!');
  expect(dataElement).toBeInTheDocument();
});

`findBy*` क्वेरीज़

जैसा कि पहले उल्लेख किया गया है, `findBy*` क्वेरीज़ एसिंक्रोनस हैं और एक प्रॉमिस लौटाती हैं जो मिलान तत्व मिलने पर हल हो जाती है। ये उन एसिंक्रोनस संचालनों के परीक्षण के लिए उपयोगी हैं जिनके परिणामस्वरूप DOM में परिवर्तन होते हैं।

हुक्स का परीक्षण

रिएक्ट हुक्स पुन: प्रयोज्य फ़ंक्शन हैं जो स्टेटफुल लॉजिक को समाहित करते हैं। RTL कस्टम हुक्स को अलगाव में परीक्षण करने के लिए `@testing-library/react-hooks` से `renderHook` उपयोगिता प्रदान करता है (जो v17 के रूप में सीधे `@testing-library/react` के पक्ष में पदावनत है)।

// src/hooks/useCounter.js
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return { count, increment, decrement };
}

export default useCounter;

// src/hooks/useCounter.test.js
import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

test('increments the counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

व्याख्या:

उन्नत परीक्षण तकनीकें

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

मॉकिंग मॉड्यूल

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

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

// src/components/MyComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from '../api/dataService';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

// src/components/MyComponent.test.js
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';
import * as dataService from '../api/dataService';

jest.mock('../api/dataService');

test('fetches data from the API', async () => {
  dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' });

  render(<MyComponent />);

  await waitFor(() => screen.getByText('Mocked data!'));

  expect(screen.getByText('Mocked data!')).toBeInTheDocument();
  expect(dataService.fetchData).toHaveBeenCalledTimes(1);
});

व्याख्या:

संदर्भ प्रदाता (Context Providers)

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

// src/contexts/ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// src/components/MyComponent.js
import React, { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

// src/components/MyComponent.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
import { ThemeProvider } from '../contexts/ThemeContext';

test('toggles the theme', () => {
  render(
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );

  const themeParagraph = screen.getByText(/Current theme: light/i);
  const toggleButton = screen.getByRole('button', { name: /Toggle Theme/i });

  expect(themeParagraph).toBeInTheDocument();

  fireEvent.click(toggleButton);

  expect(screen.getByText(/Current theme: dark/i)).toBeInTheDocument();
});

व्याख्या:

राउटर के साथ परीक्षण

रिएक्ट राउटर का उपयोग करने वाले कंपोनेंट्स का परीक्षण करते समय, आपको एक मॉक राउटर संदर्भ प्रदान करना होगा। आप इसे `react-router-dom` से `MemoryRouter` कंपोनेंट का उपयोग करके प्राप्त कर सकते हैं।

// src/components/MyComponent.js
import React from 'react';
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

// src/components/MyComponent.test.js
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders a link to the about page', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );

  const linkElement = screen.getByRole('link', { name: /Go to About Page/i });
  expect(linkElement).toBeInTheDocument();
  expect(linkElement).toHaveAttribute('href', '/about');
});

व्याख्या:

प्रभावी टेस्ट लिखने के लिए सर्वोत्तम प्रथाएं

RTL के साथ टेस्ट लिखते समय पालन करने के लिए यहां कुछ सर्वोत्तम प्रथाएं दी गई हैं:

निष्कर्ष

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