🎣
Testing React Apps

Testing Custom Hooks

renderHook Utility
💡 renderHook, EK, "ISOLATED, LAB, ENVIRONMENT" hai — CUSTOM, HOOK, KO, EK, ACTUAL, COMPONENT, KE, ANDAR, "USE" KIYE, BINA, USE, TEST, KIYA, JA, SAKTA, hai — jaise, EK, ENGINE, KO, POORI, CAR, MEIN, LAGAए, BINA, TEST, KARNA.

Custom hooks, (jaise, useCounter, useFetch) ko, TEST, KARNE, KE, LIYE, EK, DUMMY, COMPONENT, BANANA, PADТA, THA, PEHLE — @testing-library/react-hooks (AB, @testing-library/react, KA, HISSA) ka, renderHook(), YE, PROCESS, SIMPLIFY, KARTA, hai.

renderHook(() => useCounter()), HOOK, KO, RUN, KARTA, hai, aur, EK, result OBJECT, RETURN, KARTA, hai, JISKA, .current, PROPERTY, HOOK, KI, RETURN, VALUE, HOLD, KARTA, hai. act(), STATE, UPDATES, KO, WRAP, KARNE, KE, LIYE, USE, HOTA, hai.

import { renderHook, act } from "@testing-library/react";
import useCounter from "./useCounter";

test("increments counter", () => {
  const { result } = renderHook(() => useCounter());

  expect(result.current.count).toBe(0);

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});
🎣
renderHook, EK, "ISOLATED, LAB, ENVIRONMENT" hai — CUSTOM, HOOK, KO, EK, ACTUAL, COMPONENT, KE, ANDAR, "USE" KIYE, BINA, USE, TEST, KIYA, JA, SAKTA, hai — jaise, EK, ENGINE, KO, POORI, CAR, MEIN, LAGAए, BINA, TEST, KARNA.
1 / 2
⚡ झट से Recap
  • renderHook() = custom hook, ko, DUMMY, component, ke, BINA, TEST, karta hai
  • result.current = hook, ki, current, RETURN, value
  • act() = state, updates, ko, WRAP, karta hai — assertions, se, PEHLE, flush, ensure, karta hai
इस page में (2 subtopics)

renderHook((props) => useCustomHook(props), { initialProps: { id: 1 } }), HOOK, KO, INITIAL, ARGUMENTS, KE, SAATH, TEST, KARTA, hai. rerender({ id: 2 }), SE, DIFFERENT, ARGUMENTS, KE, SAATH, DOBARA, RENDER, KIYA, JA, SAKTA, hai — DEPENDENCY, CHANGES, TEST, KARNE, KE, LIYE.

const { result, rerender } = renderHook(({ id }) => useUser(id), { initialProps: { id: 1 } });
rerender({ id: 2 });

AGAR, EK, CUSTOM, HOOK, useContext() USE, KARTA, hai, renderHook() KA, wrapper OPTION, SE, EK, Provider, SUPPLY, KIYA, JA, SAKTA, hai — WARNA, HOOK, DEFAULT, CONTEXT, VALUE, USE, KAREGA (JO, TEST, KE, LIYE, GALAT, HO, SAKTA, hai).

renderHook(() => useTheme(), {
  wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>
});