Custom Hooks की Testing
In this page:
import { renderHook, act } from "@testing-library/react";
const { result } = renderHook(() => useHookName(initial));
act(() => {
result.current.action();
});
expect(result.current.value).toBe(expected);आप एक Hook को Test में सीधे Call क्यों नहीं कर सकते
useState जैसे Hooks renders के बीच state track करने के लिए React की internal rendering machinery पर rely करते हैं — एक plain test function में सीधे useCounter() call करना एक error throw करता है, क्योंकि इसके hook करने के लिए कोई component या render cycle मौजूद नहीं।
const result = useMyHook() की कोशिश करना हमेशा एक 'Invalid hook call' error के साथ fail होता है।Isolation में Test करने के लिए renderHook उपयोग करना
@testing-library/react से renderHook() आपके hook को automatically एक minimal, invisible test component में wrap करता है, hook को एक real render cycle के अंदर run होने देते हुए। Returned result object की .current property आपको वह देती है जो hook ने return किया।
उदाहरण: Using renderHook to Test in Isolation
// Run in your local React project (npm install required)
import { renderHook } from '@testing-library/react';
function useCounter() {
const [count, setCount] = React.useState(0);
return { count, increment: () => setCount(c => c + 1) };
}
test('counter starts at 0', () => {
const { result } = renderHook(() => useCounter());
expect(result.current.count).toBe(0);
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
act() से Updates Trigger करना
Hook से returned एक function call करना (जैसे increment()) act() में wrap करना चाहिए, जो React को बताता है resulting state update को fully process करे और re-render करे आपके test के आगे जाने से पहले, यह सुनिश्चित करते हुए कि result.current latest value reflect करे।
उदाहरण: Triggering Updates with act()
// Run in your local React project (npm install required)
import { renderHook, act } from '@testing-library/react';
function useCounter() {
const [count, setCount] = React.useState(0);
return { count, increment: () => setCount(c => c + 1) };
}
test('counter increments', () => {
const { result } = renderHook(() => useCounter());
act(() => { result.current.increment(); });
expect(result.current.count).toBe(1);
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- किसी component के बाहर एक test function body में सीधे एक hook call करने की कोशिश करना — hooks सिर्फ React के rendering system के अंदर run हो सकते हैं।
- यह भूल जाना कि renderHook के act() calls के अंदर state updates को React द्वारा correctly process होने के लिए wrap किया जाना चाहिए।
- एक hook को completely isolation में test करना जब इसका real behavior सिर्फ एक specific component context के साथ combined होने पर sense बनाता है।
- Hooks को directly एक test में call नहीं किया जा सकता — उन्हें React के render cycle के अंदर run होना चाहिए।
- @testing-library/react से renderHook() एक hook को automatically एक minimal test component में wrap करता है।
- result object की .current property hook के return किए गए को access देती है।
- act() यह सुनिश्चित करता है कि एक test के दौरान trigger हुए state updates assertions run होने से पहले fully process हो चुके हों।
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: