Mocking in React Tests
API, CALLS, (fetch, axios) ko, MOCK, KARNA, ZAROORI, hai, TESTS, MEIN — REAL, NETWORK, REQUESTS, TESTS, KO, SLOW, FLAKY, (INTERNET, PAR, DEPEND) BANATE, HAIN. jest.mock(), EK, POORE, MODULE, KO, MOCK, KARTA, hai. MSW (Mock Service Worker), NETWORK-LEVEL, PAR, REQUESTS, INTERCEPT, KARTA, hai — MORE, REALISTIC.
Custom, HOOKS, (jaise, useFetch), YA, EXTERNAL, LIBRARIES, KO, bhi, MOCK, KIYA, JA, SAKTA, hai — COMPONENT, KO, ISOLATION, MEIN, TEST, KARNE, KE, LIYE, BINA, ACTUAL, DEPENDENCY, PAR, DEPEND, KIYE.
import { render, screen, waitFor } from "@testing-library/react";
import UserProfile from "./UserProfile";
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ name: "Aarav" }),
})
);
test("displays user name after fetch", async () => {
render(<UserProfile userId={1} />);
await waitFor(() => {
expect(screen.getByText("Aarav")).toBeInTheDocument();
});
expect(fetch).toHaveBeenCalledWith("/api/users/1");
});- API calls, MOCK karna, ZAROORI hai — real, network, requests, SLOW/FLAKY, banate hain
- jest.mock() = poora, module, mock, karta hai. MSW = network-level, interception
- waitFor() = asynchronous, updates, ke, liye, ZAROORI
MSW, fetch/axios, ko, DIRECTLY, mock, karne, ke, BAJAYE, ACTUAL, NETWORK, LEVEL, PAR, REQUESTS, INTERCEPT, KARTA, hai — COMPONENT, CODE, ko, PATA, HI, NAHI, CHALTA, ki, MOCK, HO, RAHA, hai, jo, TESTS, ko, MORE, REALISTIC, BANATA, hai.
const server = setupServer(
http.get("/api/users/1", () => HttpResponse.json({ name: "Aarav" }))
);jest.useFakeTimers(), setTimeout/setInterval, ko, MOCK, KARTA, hai — jest.advanceTimersByTime(1000), SE, "TIME, KO, AAGE, BADHAYA" JA, SAKTA, hai, BINA, ACTUALLY, WAIT, KIYE — DEBOUNCED, INPUTS, YA, TIMERS, WALE, COMPONENTS, TEST, KARNE, KE, LIYE, USEFUL.