React কম্পোনেন্ট যখন API কল করে, তখন সরাসরি সার্ভার বা ইন্টারনেটের ওপর নির্ভর করলে টেস্টগুলো অনেক সময় unstable হয়ে যায়। কখনো API ডাউন, কখনো ডেটা বদলে গেছে — ফলে টেস্ট ফেইল! 😩

এই ঝামেলা এড়ানোর জন্যই আমরা API মকিং (Mocking) ব্যবহার করি। মানে, আসল API কল না করে আমরা নিজের মতো করে একটা “নকল” (mocked) রেসপন্স বানাই। এতে টেস্ট সবসময় নির্ভরযোগ্যভাবে চলে, কোনো বাইরের সার্ভারের ওপর নির্ভর করতে হয় না।

এই গাইডে আমি ধাপে ধাপে দেখাবো — React Testing Library ব্যবহার করে কীভাবে সহজভাবে API কল মক করা যায়।

🧩 ধাপ ১: প্রয়োজনীয় প্যাকেজ ইনস্টল করা

প্রথমে দুটি প্যাকেজ লাগবে —

  • @testing-library/react
  • msw (Mock Service Worker)

টার্মিনালে রান করতে হবে 👇

npm install --save-dev @testing-library/react msw

⚙️ ধাপ ২: Mock Service Worker (MSW) সার্ভার সেটআপ করা

এখন src/setupTests.js নামে একটা ফাইল তৈরি করতে হবে। এখানে আমরা টেস্টের জন্য মক সার্ভার সেট করব।

// src/setupTests.js
import { setupServer } from "msw/node";
import { handlers } from "./mocks/handlers";

// রিকোয়েস্ট হ্যান্ডলার দিয়ে সার্ভার তৈরি
const server = setupServer(...handlers);

// টেস্ট শুরুর আগে সার্ভার চালু করো
beforeAll(() => server.listen());

// টেস্ট শেষে সার্ভার বন্ধ ও রিসেট করো
afterAll(() => server.resetHandlers(), server.close());

🧠 ধাপ ৩: Request Handler তৈরি করা

এখন একটা নতুন ফোল্ডার বানাও — src/mocks এর ভেতরে handlers.js নামে ফাইল রাখো। এই ফাইলেই থাকবে তোমার সব মকড API কলের সংজ্ঞা।

// src/mocks/handlers.js
import { rest } from "msw";

export const handlers = [
  rest.get("/api/data", (req, res, ctx) => {
    // সফল মকড রেসপন্স ফেরত দিচ্ছে
    return res(ctx.status(200), ctx.json({ data: "Mocked response" }));
  }),
];

🧪 ধাপ ৪: টেস্টে Mocked API ব্যবহার করা

এখন টেস্ট ফাইলে React Testing Library আর MSW ব্যবহার করে API কল মক করো।

import { render, screen } from "@testing-library/react";
import { rest } from "msw";
import { setupServer } from "msw/node";
import YourComponent from "./YourComponent";

const server = setupServer(
  rest.get("/api/data", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ data: "Mocked response" }));
  })
);

beforeAll(() => server.listen());
afterAll(() => server.close());

test("API থেকে ডেটা দেখায়", async () => {
  render(<YourComponent />);
  const dataElement = await screen.findByText("Mocked response");
  expect(dataElement).toBeInTheDocument();
});

▶️ ধাপ ৫: টেস্ট চালাও 🚀

সব সেটআপ হয়ে গেলে এখন শুধু টেস্ট রান করো:

npm test

Mock সার্ভার তোমার রিকোয়েস্ট ইন্টারসেপ্ট করবে এবং পূর্বনির্ধারিত রেসপন্স দেবে। এভাবে তুমি কোনো লাইভ API ছাড়াই তোমার কম্পোনেন্ট টেস্ট করতে পারবে — দ্রুত, নির্ভরযোগ্যভাবে, এবং বারবার!

🎯 উপসংহার

React Testing Library আর Mock Service Worker একসাথে ব্যবহার করলে তুমি খুব সহজেই তোমার টেস্টগুলোকে বাস্তব API থেকে পুরোপুরি আলাদা রাখতে পারবে।

এই পদ্ধতিতে তুমি পারবে —

✅ মক সার্ভার তৈরি করতে ✅ API রিকোয়েস্ট হ্যান্ডলার ডিফাইন করতে ✅ এবং টেস্টে মকড রেসপন্স ব্যবহার করতে

ফলে তুমি বিভিন্ন রেসপন্স ও এজ কেস পরীক্ষা করতে পারবে, কোনো বাস্তব সার্ভারে হিট না করেই।

Happy Testing! 🎉