React Components की Testing
In this page:
render(<Component prop={value} />);
expect(screen.getByText("text")).toBeInTheDocument();Typed Props Test करना
Typed props test करने का मतलब है एक component को एक object से render करना जो इसके declared Props interface को satisfy करे, इसलिए गलत type का एक prop pass करना test चलने से पहले ही compile time पर fail होता है।
उदाहरण: Testing Typed Props
import React from "react";
interface GreetingProps {
name: string;
}
function Greeting({ name }: GreetingProps): React.JSX.Element {
return <p>Hello, {name}</p>;
}
// render(<Greeting name="Ravi" />) requires name: string at compile time
export default Greeting;Rendered Text Test करना
screen.getByText(...) जैसी किसी चीज़ से rendered text test करना confirm करता है कि DOM output बिल्कुल वैसा ही है जो एक user असल में देखता, component की internal typed state से independent।
उदाहरण: Testing Rendered Text
import React from "react";
function Message(): React.JSX.Element {
return <p>Welcome!</p>;
}
// screen.getByText("Welcome!") confirms the rendered DOM output
export default Message;Event Handlers Typing करना
एक component को pass किए event handlers को type करना — जैसे onClick: (event: React.MouseEvent) => void — test को handler को एक untyped stub के बजाय एक realistic, type-checked synthetic event से call करने देता है।
उदाहरण: Typing Event Handlers
import React from "react";
interface ButtonProps {
onClick: (event: React.MouseEvent) => void;
}
function Button({ onClick }: ButtonProps): React.JSX.Element {
return <button onClick={onClick}>Click</button>;
}
export default Button;Component State Test करना
एक user interaction (जैसे एक click) के बाद component state test करना verify करता है कि component की internal state सही तरीके से update हुई, जो एक typed component में इसका मतलब है कि state shape खुद इसके declared type के against checked है।
उदाहरण: Testing Component State
import React, { useState } from "react";
function Counter(): React.JSX.Element {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// after fireEvent.click, expect(count text).toBe("1")
export default Counter;Component Props और Callbacks Test करना
यह test करना कि एक component अपने typed props को सही render करता है और अपने typed callback props को सही arguments के साथ invoke करता है, एक component और इसके parent के बीच पूरे typed contract को verify करता है, सिर्फ एक side नहीं।
उदाहरण: Testing Component Props and Callbacks
import React from "react";
interface FormProps {
onSubmit: (value: string) => void;
}
function Form({ onSubmit }: FormProps): React.JSX.Element {
return <button onClick={() => onSubmit("data")}>Submit</button>;
}
export default Form;- एक required prop के बिना एक component render करना, जिसे TypeScript flag करता है।
- ऐसे text के लिए
getByTextउपयोग करना जो elements के across split हो, जो फिर match नहीं होता। - State-changing interactions को
await/userEventसे wrap करना भूल जाना, इसलिए assertion update से पहले चलती है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: