Elements को Render और Query करना
In this page:
render(<Component />);
screen.getByRole("role", { name: "label" }); // throws if missing
screen.queryByText("text"); // null if missing
await screen.findByText("text"); // waits for async contentgetBy vs. queryBy vs. findBy
getBy* अगर कोई matching element मौजूद न हो तो immediately एक error throw करता है, कुछ IS present यह assert करने के लिए ideal बनाते हुए। queryBy* throw करने के बजाय null return करता है, कुछ ABSENT यह assert करने के लिए सही choice बनाते हुए। findBy* एक Promise return करता है और wait करता है, उन elements के लिए ideal जो एक async action के बाद appear होते हैं।
- एक simple mental model:
- getBy 'यह अभी मौजूद होना चाहिए' के लिए
- queryBy 'यह मौजूद NOT होना चाहिए' के लिए
- findBy 'यह जल्द मौजूद होगा' के लिए।
उदाहरण: getBy vs. queryBy vs. findBy
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import Alert from './Alert';
test('alert is not shown initially', () => {
render(<Alert show={false} />);
expect(screen.queryByText('Warning!')).not.toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
findBy से Async Content का Wait करना
जब content एक asynchronous action के बाद appear होता है (जैसे एक fetch resolve होना), findBy* queries एक Promise return करती हैं जो element appear होने तक या एक timeout reach होने तक repeatedly check करती है, tests में manual waiting या arbitrary setTimeout calls की ज़रूरत से बचते हुए।
उदाहरण: Waiting for Async Content with findBy
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';
test('shows user name after loading', async () => {
render(<UserProfile userId={1} />);
const name = await screen.findByText('Asha');
expect(name).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Recommended Query Priority
Testing Library एक priority order recommend करती है कौन सी query पहले reach करें: getByRole preferred है (यह real accessibility semantics reflect करता है), फिर form fields के लिए getByLabelText, फिर general content के लिए getByText, test-ID-based queries last resort के रूप में जब कुछ और fit न हो।
उदाहरण: The Recommended Query Priority
// Run in your local React project (npm install required)
// Priority order (most to least preferred):
screen.getByRole('button', { name: 'Save' }); // 1st choice
screen.getByLabelText('Email address'); // 2nd choice
screen.getByText('Welcome back'); // 3rd choice
screen.getByTestId('save-button'); // last resort- Role से बेहतर identify होने वाले elements के लिए getByText उपयोग करना, accessibility semantics miss करते हुए जो test otherwise verify कर सकता था।
- getBy, queryBy, और findBy के बीच difference न जानना — हर एक missing या async elements के लिए अलग behave करता है।
- container.querySelector overuse करना, Testing Library के user-centric query system को completely bypass करते हुए।
- getBy* queries अगर zero या multiple matches मिलें तो throw करती हैं — उन elements के लिए उपयोग करें जो अभी मौजूद होने की उम्मीद है।
- queryBy* throw करने के बजाय null return करती है — यह assert करने के लिए उपयोग करें कि कुछ मौजूद NOT है।
- findBy* एक Promise return करती है, एक element appear होने का wait करते हुए — उस content के लिए उपयोग करें जो asynchronously दिखता है।
- Query priority (recommended order): getByRole, getByLabelText, getByText, फिर ज़्यादा implementation-specific options।
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: