M

MLOG

मराठी

या संपूर्ण मार्गदर्शकाद्वारे React Testing Library (RTL) मध्ये प्रभुत्व मिळवा. तुमच्या React ॲप्लिकेशन्ससाठी प्रभावी, सांभाळण्यास सोप्या आणि वापरकर्ता-केंद्रित चाचण्या कशा लिहायच्या हे शिका.

React टेस्टिंग लायब्ररी: एक सर्वसमावेशक मार्गदर्शक

आजच्या वेगवान वेब डेव्हलपमेंटच्या जगात, तुमच्या React ॲप्लिकेशन्सची गुणवत्ता आणि विश्वसनीयता सुनिश्चित करणे अत्यंत महत्त्वाचे आहे. React Testing Library (RTL) हे वापरकर्त्याच्या दृष्टिकोनावर लक्ष केंद्रित करणाऱ्या चाचण्या लिहिण्यासाठी एक लोकप्रिय आणि प्रभावी उपाय म्हणून उदयास आले आहे. हे मार्गदर्शक RTL चा संपूर्ण आढावा देते, मूलभूत संकल्पनांपासून ते प्रगत तंत्रांपर्यंत सर्व काही समाविष्ट करते, ज्यामुळे तुम्हाला मजबूत आणि सांभाळण्यास सोपे React ॲप्लिकेशन्स तयार करण्यास मदत होईल.

React टेस्टिंग लायब्ररी का निवडावी?

पारंपारिक टेस्टिंग पद्धती अनेकदा इम्प्लिमेंटेशन तपशिलांवर अवलंबून असतात, ज्यामुळे चाचण्या नाजूक बनतात आणि कोडमध्ये किरकोळ बदल झाल्यास त्या अयशस्वी होण्याची शक्यता असते. याउलट, 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';

तुमची पहिली टेस्ट लिहिणे

चला एका सोप्या उदाहरणाने सुरुवात करूया. समजा तुमच्याकडे एक React कंपोनेंट आहे जो अभिवादन संदेश प्रदर्शित करतो:

// 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`

ही क्वेरी त्याच्या alt मजकुरानुसार एक इमेज घटक शोधते. ॲक्सेसिबिलिटी सुनिश्चित करण्यासाठी सर्व इमेजेससाठी अर्थपूर्ण alt मजकूर प्रदान करणे महत्त्वाचे आहे.

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

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

`getByTitle`

ही क्वेरी त्याच्या title ॲट्रिब्युटनुसार एक घटक शोधते.

<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*` क्वेरीजच्या असिंक्रोनस आवृत्त्या आहेत. त्या एक Promise परत करतात जो जुळणारा घटक सापडल्यावर रिझॉल्व्ह होतो. 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` APIs प्रदान करते, जसे की बटणे क्लिक करणे, इनपुट फील्डमध्ये टाइप करणे आणि फॉर्म सबमिट करणे.

`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!');
});

असिंक्रोनस कोडची चाचणी करणे

बऱ्याच React ॲप्लिकेशन्समध्ये असिंक्रोनस ऑपरेशन्स समाविष्ट असतात, जसे की 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*` क्वेरीज असिंक्रोनस असतात आणि एक Promise परत करतात जो जुळणारा घटक सापडल्यावर रिझॉल्व्ह होतो. DOM मध्ये बदल घडवणाऱ्या असिंक्रोनस ऑपरेशन्सची चाचणी घेण्यासाठी हे उपयुक्त आहे.

Hooks ची चाचणी करणे

React Hooks हे पुन्हा वापरण्यायोग्य फंक्शन्स आहेत जे स्टेटफुल लॉजिकला एन्कॅप्सुलेट करतात. RTL कस्टम Hooks ची स्वतंत्रपणे चाचणी करण्यासाठी `@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 च्या मूलभूत गोष्टींमध्ये प्रभुत्व मिळवल्यानंतर, तुम्ही तुमच्या चाचण्यांची गुणवत्ता आणि देखभालक्षमता सुधारण्यासाठी अधिक प्रगत चाचणी तंत्रे शोधू शकता.

मॉड्यूल्सची नक्कल करणे (Mocking)

कधीकधी, तुम्हाला तुमचे कंपोनेंट्स वेगळे करण्यासाठी आणि चाचणी दरम्यान त्यांचे वर्तन नियंत्रित करण्यासाठी बाह्य मॉड्यूल्स किंवा अवलंबित्व (dependencies) यांची नक्कल करण्याची आवश्यकता असू शकते. 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);
});

स्पष्टीकरण:

कॉन्टेक्स्ट प्रोव्हायडर्स

जर तुमचा कंपोनेंट कॉन्टेक्स्ट प्रोव्हायडरवर अवलंबून असेल, तर तुम्हाला चाचणी दरम्यान तुमच्या कंपोनेंटला प्रोव्हायडरमध्ये रॅप करावे लागेल. हे सुनिश्चित करते की कंपोनेंटला कॉन्टेक्स्ट व्हॅल्यूजचा ॲक्सेस आहे.

// 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 वापरणाऱ्या कंपोनेंट्सची चाचणी करता, तेव्हा तुम्हाला एक मॉक राउटर कॉन्टेक्स्ट प्रदान करणे आवश्यक असेल. तुम्ही हे `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 सह चाचण्या लिहिताना अनुसरण करण्यासाठी येथे काही सर्वोत्तम पद्धती आहेत:

निष्कर्ष

React टेस्टिंग लायब्ररी तुमच्या React ॲप्लिकेशन्ससाठी प्रभावी, सांभाळण्यास सोप्या आणि वापरकर्ता-केंद्रित चाचण्या लिहिण्यासाठी एक शक्तिशाली साधन आहे. या मार्गदर्शिकेत वर्णन केलेल्या तत्त्वांचे आणि तंत्रांचे पालन करून, तुम्ही तुमच्या वापरकर्त्यांच्या गरजा पूर्ण करणारे मजबूत आणि विश्वसनीय ॲप्लिकेशन्स तयार करू शकता. वापरकर्त्याच्या दृष्टिकोनातून चाचणी करण्यावर लक्ष केंद्रित करण्याचे लक्षात ठेवा, इम्प्लिमेंटेशन तपशील तपासणे टाळा आणि स्पष्ट आणि संक्षिप्त चाचण्या लिहा. RTL स्वीकारून आणि सर्वोत्तम पद्धतींचा अवलंब करून, तुम्ही तुमच्या React प्रोजेक्ट्सची गुणवत्ता आणि देखभालक्षमता लक्षणीयरीत्या सुधारू शकता, तुमचे स्थान किंवा तुमच्या जागतिक प्रेक्षकांच्या विशिष्ट आवश्यकता विचारात न घेता.