Web Development Unit এবং Integration Test তৈরি করা গাইড ও নোট

Next.js অ্যাপ্লিকেশনের জন্য ইউনিট টেস্ট (Unit Test) এবং ইন্টিগ্রেশন টেস্ট (Integration Test) তৈরি করা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি অ্যাপ্লিকেশনের কোডের কার্যকারিতা পরীক্ষা করতে সাহায্য করে এবং ভবিষ্যতে কোড পরিবর্তনের সময় কোনো সমস্যা হওয়ার সম্ভাবনা কমায়।

Next.js এ টেস্টিং করার জন্য সাধারণত Jest এবং React Testing Library ব্যবহার করা হয়। Jest হল একটি জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক যা ইউনিট টেস্ট এবং ইন্টিগ্রেশন টেস্টের জন্য উপযুক্ত, এবং React Testing Library রিয়েক্ট কম্পোনেন্টের জন্য সহজ এবং কার্যকর টেস্টিং টুল।

১. Next.js এ Unit Test তৈরি করা

Unit Test হল কোডের একক অংশের কার্যকারিতা পরীক্ষা করার পদ্ধতি। সাধারণত এটি ছোট ফাংশন বা কম্পোনেন্টের আচরণ পরীক্ষা করে।

Step-by-Step: Unit Test সেটআপ করা

1. Jest ইনস্টল করা:

   প্রথমে Jest এবং React Testing Library ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ডগুলো রান করুন:

   npm install --save-dev jest @testing-library/react @testing-library/jest-dom
   

2. Jest কনফিগারেশন:

   package.json ফাইলের মধ্যে Jest এর কনফিগারেশন যুক্ত করুন:

   {
     "scripts": {
       "test": "jest"
     },
     "jest": {
       "preset": "next/babel"
     }
   }
   

3. Unit Test লিখা:

   উদাহরণ হিসেবে, একটি সহজ React কম্পোনেন্টের জন্য ইউনিট টেস্ট লিখা যাক।

   // components/Button.js
   export default function Button({ label }) {
     return <button>{label}</button>;
   }
   

   এখন, এই কম্পোনেন্টের জন্য টেস্ট লিখি।

   // __tests__/Button.test.js
   import { render, screen } from '@testing-library/react';
   import Button from '../components/Button';
   
   describe('Button component', () => {
     it('should render the button with correct label', () => {
       render(<Button label="Click Me" />);
       const buttonElement = screen.getByText(/Click Me/i);
       expect(buttonElement).toBeInTheDocument();
     });
   });
   

4. Unit Test রান করা:

   এখন, টেস্ট চালানোর জন্য টার্মিনালে নিচের কমান্ডটি রান করুন:

   npm test
   

   এটি Button.test.js ফাইলের টেস্টটি চালাবে এবং ফলাফল দেখাবে।

Unit Test এর সুবিধা:

• ছোট কোডের অংশগুলোর কার্যকারিতা সুনির্দিষ্টভাবে পরীক্ষা করা যায়।
• ডিবাগিং এবং কোডের রিগ্রেশন পরীক্ষা সহজ হয়।

২. Next.js এ Integration Test তৈরি করা

Integration Test হল একটি বা একাধিক মডিউল/কম্পোনেন্টের সমন্বয়ে তৈরি টেস্ট, যা কোডের একাধিক অংশের সাথে ইন্টারঅ্যাকশন পরীক্ষা করে। এখানে, একাধিক কম্পোনেন্ট একসাথে কাজ করছে কিনা তা পরীক্ষা করা হয়।

Step-by-Step: Integration Test সেটআপ করা

1. Integration Test লিখা:

   ধরুন, আমাদের একটি কম্পোনেন্ট আছে যেটি অন্য একটি কম্পোনেন্টের উপর নির্ভরশীল। আমরা যদি দুটি কম্পোনেন্টের মধ্যে ইন্টিগ্রেশন পরীক্ষা করতে চাই, তাহলে নিচের মতো টেস্ট লিখতে হবে।

   উদাহরণস্বরূপ, একটি Page কম্পোনেন্ট আছে যা Button কম্পোনেন্টের উপর নির্ভরশীল।

   // components/Button.js
   export default function Button({ label }) {
     return <button>{label}</button>;
   }
   

   // components/Page.js
   import Button from './Button';
   
   export default function Page() {
     return (
       <div>
         <h1>Welcome to the page!</h1>
         <Button label="Click Me" />
       </div>
     );
   }
   

   Integration Test: এখানে, আমরা চেক করবো যে Page কম্পোনেন্টটি সঠিকভাবে Button কম্পোনেন্ট রেন্ডার করছে কিনা।

   // __tests__/Page.test.js
   import { render, screen } from '@testing-library/react';
   import Page from '../components/Page';
   
   describe('Page Component', () => {
     it('should render the button with correct label', () => {
       render(<Page />);
       const buttonElement = screen.getByText(/Click Me/i);
       expect(buttonElement).toBeInTheDocument();
     });
   
     it('should render the page title', () => {
       render(<Page />);
       const titleElement = screen.getByText(/Welcome to the page!/i);
       expect(titleElement).toBeInTheDocument();
     });
   });
   

2. Integration Test রান করা:

   এখন, টেস্ট চালানোর জন্য আবারও:

   npm test
   

   এই কমান্ডটি Page.test.js ফাইলের সমস্ত টেস্ট চালাবে এবং ফলাফল দেখাবে।

Integration Test এর সুবিধা:

• অ্যাপ্লিকেশনের একাধিক অংশের মধ্যে ইন্টারঅ্যাকশন সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করা যায়।
• ইউনিট টেস্টের চেয়ে বৃহত্তর স্কেলে টেস্ট করা সম্ভব, কারণ এখানে কম্পোনেন্টের মিথস্ক্রিয়া পরীক্ষা করা হয়।

৩. Next.js এ Mocking এবং API Call Testing

Jest এর মাধ্যমে আপনি মকিং (Mocking) এবং API কলগুলোও টেস্ট করতে পারেন। যদি আপনার কম্পোনেন্ট API কল করে থাকে, তাহলে আপনি সেই কলগুলোর প্রতিস্থাপন (mock) করতে পারেন।

API Call এর মকিং উদাহরণ:

// components/Posts.js
import { useEffect, useState } from 'react';

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/api/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Mock API Call টেস্ট:

// __tests__/Posts.test.js
import { render, screen, waitFor } from '@testing-library/react';
import Posts from '../components/Posts';

jest.mock('next/router', () => ({
  useRouter: () => ({
    push: jest.fn(),
  }),
}));

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([{ id: 1, title: 'Test Post' }]),
  })
);

describe('Posts Component', () => {
  it('should render posts from API', async () => {
    render(<Posts />);
    await waitFor(() => screen.getByText('Test Post'));
    expect(screen.getByText('Test Post')).toBeInTheDocument();
  });
});

এখানে, fetch মক করে API কলকে টেস্ট করা হয়েছে।

সারাংশ

Next.js অ্যাপ্লিকেশনে Unit এবং Integration Testing খুবই গুরুত্বপূর্ণ। Jest এবং React Testing Library ব্যবহার করে আপনি সহজেই কম্পোনেন্ট, API কল, এবং ইউজার ইন্টারঅ্যাকশন পরীক্ষা করতে পারেন। ইউনিট টেস্ট সাধারণত ছোট কোডের অংশের কার্যকারিতা পরীক্ষা করে, এবং ইন্টিগ্রেশন টেস্ট বিভিন্ন কম্পোনেন্টের মধ্যে ইন্টারঅ্যাকশন পরীক্ষা করে।