React Apps की Testing का परिचय
In this page:
React Components क्यों Test करें
App बढ़ने के साथ, हर change के बाद manually हर feature पर click करना slow और error-prone हो जाता है। Automated tests आपको seconds में verify करने देते हैं कि एक component अब भी सही behave करता है, regressions (जो चीज़ें पहले काम करती थीं लेकिन टूट गईं) को real users तक पहुंचने से पहले पकड़ते हुए।
उदाहरण: Why Test React Components
// Run in your local React project (npm install required)
// Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('renders button text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Behavior Test करना, Implementation नहीं
अच्छे React tests वह check करते हैं जो एक USER देखेगा या करेगा — visible text, clickable buttons, form submissions — internal details के बजाय जैसे एक component के specific state variable names।
यह tests को refactoring के against ज़्यादा resilient बनाता है, क्योंकि वे सिर्फ इसलिए नहीं टूटते कि आपने एक internal variable rename किया।
उदाहरण: Testing Behavior, Not Implementation
// Run in your local React project (npm install required)
// Good: tests what the user sees
test('shows error message on invalid email', () => {
render(<SignupForm />);
fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'bad' } });
fireEvent.click(screen.getByText('Submit'));
expect(screen.getByText('Invalid email')).toBeInTheDocument();
});Testing Pyramid: Unit, Integration, E2E
Tests generally तीन levels में fall होते हैं: unit tests isolation में एक small piece check करते हैं, integration tests कई pieces एक साथ काम करते हुए check करते हैं, और end-to-end (E2E) tests पूरे app के through एक full real user flow simulate करते हैं।
ज़्यादातर teams कई unit tests, कम integration tests, और सिर्फ कुछ E2E tests लिखती हैं।
उदाहरण: The Testing Pyramid: Unit, Integration, E2E
// Run in your local React project (npm install required)
// Unit: tests one function/component in isolation
test('formatPrice formats correctly', () => { expect(formatPrice(5)).toBe('$5.00'); });
// Integration: tests a form + validation working together
// (see the previous section's example)
// E2E: tests a full flow (often with Cypress/Playwright)
// cy.visit('/signup'); cy.get('#email').type('[email protected]'); cy.get('button').click();- Implementation details (internal state variable names) test करना instead of जो user actually देखता और करता है।
- सिर्फ happy path के लिए tests लिखना और error/edge cases कभी check न करना।
- Tests को regularly run न करना, broken tests को unnoticed pile up होने देते हुए।
- React apps को test करना typically एक test runner (जैसे Jest या Vitest) plus components render करने के लिए React Testing Library involve करता है।
- अच्छे tests user-visible behavior पर focus करते हैं, internal implementation details पर नहीं।
- Common test types में unit tests (एक function/component), integration tests (कई साथ काम करते हुए), और end-to-end tests (एक full user flow) शामिल हैं।
- Tests regressions को early पकड़ते हैं, real users तक पहुंचने से पहले।
npm install (Jest/Vitest + @testing-library/react) चाहिए — tests Node में run होते हैं, इस browser sandbox में नहीं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: