React Testing Library Setup करना
In this page:
import { render, screen } from "@testing-library/react";
test("description", () => {
render(<Component />);
expect(screen.getByText("text")).toBeInTheDocument();
});Testing के लिए एक Component Render करना
React Testing Library का render() function एक component को specifically test के लिए एक virtual, jsdom-based DOM में mount करता है, similar कि कैसे ReactDOM.createRoot().render() इसे एक real browser में mount करता है।
Render होने के बाद, आप इसे query और interact कर सकते हैं जैसे यह एक real page पर हो।
उदाहरण: Rendering a Component for Testing
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';
test('renders greeting', () => {
render(<Greeting name="Asha" />);
expect(screen.getByText('Hello, Asha')).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
screen Object से Query करना
Render होने के बाद, screen object getByText, getByRole, और getByLabelText जैसे methods provide करता है rendered output में elements ढूंढने के लिए, mirroring करते हुए कि एक user कैसे चीज़ें identify करेगा — visible text या accessible role से, internal implementation details से नहीं।
उदाहरण: Querying with the screen Object
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import LoginButton from './LoginButton';
test('finds the login button by role', () => {
render(<LoginButton />);
const button = screen.getByRole('button', { name: 'Log In' });
expect(button).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
RTL की Philosophy क्यों मायने रखती है
Testing Library deliberately implementation details test करने को discourage करने के लिए design की गई है (जैसे एक component की internal state या specific class names), और इसके बजाय test करने को encourage करती है जो एक real user actually experience करता है — visible text, accessible roles, और interactive behavior।
यह tests को internal refactors के against ज़्यादा robust बनाता है।
उदाहरण: Why RTL's Philosophy Matters
// Run in your local React project (npm install required)
// Prefer this (resilient to internal refactors):
screen.getByRole('button', { name: 'Submit' });
// Over this (brittle, tied to implementation):
// container.querySelector('.btn-submit-primary-v2');- Testing Library की user-facing queries के बजाय enzyme-style queries (component internals ढूंढते हुए) उपयोग करना।
- User events के बाद होने वाले state updates को await में wrap न करना, जिससे flaky tests होते हैं।
- पहली choice के रूप में CSS class या test ID से query करना, जब एक ज़्यादा accessible query (role, label text) usually मौजूद होती है और preferred है।
- React Testing Library (RTL) testing के लिए real components को एक virtual DOM में render करती है, फिर उन्हें query करती है जैसे एक user करेगा।
- render() एक component mount करता है; screen elements ढूंढने के लिए query methods प्रदान करता है।
- RTL की philosophy: 'जितना ज़्यादा आपके tests आपके software के उपयोग होने के तरीके जैसे दिखते हैं, उतना ज़्यादा confidence वे दे सकते हैं'।
- यह commonly underlying test runner के रूप में Jest या Vitest के साथ pair होती है।
npm install @testing-library/react चाहिए — एक Node test environment में run होता है, इस browser sandbox में नहीं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: