Jest এবং React Testing Library হল জনপ্রিয় টুলস যা React কম্পোনেন্ট এবং Next.js অ্যাপ্লিকেশনের টেস্টিংয়ের জন্য ব্যবহৃত হয়। Jest একটি শক্তিশালী JavaScript টেস্টিং ফ্রেমওয়ার্ক, যা ইউনিট টেস্টিং এবং ইন্টিগ্রেশন টেস্টিংয়ের জন্য ব্যবহৃত হয়। অপরদিকে, React Testing Library React কম্পোনেন্টগুলির জন্য ইউজার-সেন্ট্রিক টেস্টিং প্রদান করে, যাতে করে আপনার অ্যাপ্লিকেশনটি কীভাবে ব্যবহারকারীদের দ্বারা ব্যবহৃত হয়, তা পরীক্ষা করা যায়।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে Jest এবং React Testing Library ব্যবহার করে Next.js অ্যাপ্লিকেশনে টেস্টিং করা যায়।
১. Jest এবং React Testing Library ইনস্টলেশন
প্রথমে, আপনাকে Jest এবং React Testing Library ইনস্টল করতে হবে। এগুলো টেস্টিং ফ্রেমওয়ার্ক এবং ইউটিলিটিসহ ব্যবহৃত হয়।
ইনস্টলেশন:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event
- jest: Jest টেস্ট ফ্রেমওয়ার্ক।
- @testing-library/react: React কম্পোনেন্টের জন্য টেস্টিং লাইব্রেরি।
- @testing-library/jest-dom: DOM এর জন্য অ্যাসারশন সরবরাহ করে (যেমন,
toBeInTheDocumentপ্রপার্টি)। - @testing-library/user-event: ইউজার ইন্টারঅ্যাকশনের জন্য ইউটিলিটি।
২. Jest কনফিগারেশন
Next.js স্বয়ংক্রিয়ভাবে Jest কনফিগারেশন তৈরি করে না, তাই আপনাকে এটি কনফিগার করতে হবে। সাধারণভাবে, আপনি jest.config.js ফাইল তৈরি করে এটি কনফিগার করবেন।
jest.config.js কনফিগারেশন উদাহরণ:
module.exports = {
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.jsx?$': 'babel-jest',
},
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};
ব্যাখ্যা:
testEnvironment: 'jsdom': এটি Jest কে jsdom পরিবেশে টেস্ট চালানোর নির্দেশ দেয়, যা ব্রাউজারের মতো পরিবেশ সিমুলেট করে।moduleNameMapper: CSS বা SCSS ফাইল মক করতে ব্যবহৃত হয়।transform: Babel ট্রান্সফর্মার ব্যবহার করে ES6 কোড এবং JSX কনভার্ট করা হয়।setupFilesAfterEnv:@testing-library/jest-domটেস্টিং সহকারীর জন্য সেটআপ।
৩. React Testing Library ব্যবহার করে টেস্ট লেখা
React Testing Library ব্যবহার করে আপনি React কম্পোনেন্টের ইউজার ইন্টারঅ্যাকশন এবং UI ভেরিফিকেশন টেস্ট করতে পারবেন। সাধারণভাবে, আপনি render(), screen, fireEvent বা user-event ব্যবহার করবেন।
উদাহরণ: একটি সিম্পল Button কম্পোনেন্ট
// components/Button.js
const Button = ({ onClick, children }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;
এখন, এই Button কম্পোনেন্টটির জন্য টেস্ট লেখার জন্য React Testing Library ব্যবহার করা হবে।
টেস্ট ফাইল:
// components/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
describe('Button component', () => {
test('renders button with text', () => {
render(<Button>Click me</Button>);
const buttonElement = screen.getByText(/click me/i);
expect(buttonElement).toBeInTheDocument();
});
test('fires event on click', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
const buttonElement = screen.getByText(/click me/i);
fireEvent.click(buttonElement);
expect(handleClick).toHaveBeenCalledTimes(1);
});
});
ব্যাখ্যা:
render(<Button />): এই ফাংশনটি কম্পোনেন্টটি রেন্ডার করে।screen.getByText(): এই ফাংশনটি DOM থেকে নির্দিষ্ট টেক্সট খুঁজে বের করে।fireEvent.click(): ইউজারের ক্লিক ইভেন্ট সিমুলেট করে।jest.fn(): এটি Jest এর একটি মক ফাংশন যা ফাংশনের কল ট্র্যাক করতে ব্যবহৃত হয়।
৪. Jest টেস্ট রান করা
Jest এর টেস্ট রান করতে, আপনি সাধারণভাবে এই কমান্ড ব্যবহার করবেন:
npm test
এটি Jest কে আপনার সমস্ত টেস্ট ফাইলগুলো খুঁজে বের করে রান করতে বলবে।
৫. Snapshot Testing
Snapshot টেস্টিং ব্যবহারের মাধ্যমে আপনি React কম্পোনেন্টের UI এর একটি স্টেট ধরে রাখতে পারেন এবং পরবর্তীতে তা পরীক্ষার মাধ্যমে UI এর কোনো পরিবর্তন হলে জানাতে পারবেন।
Snapshot Testing উদাহরণ:
// components/Button.test.js
import { render } from '@testing-library/react';
import Button from './Button';
test('Button snapshot', () => {
const { asFragment } = render(<Button>Click me</Button>);
expect(asFragment()).toMatchSnapshot();
});
ব্যাখ্যা:
asFragment(): এটি কম্পোনেন্টের একটি ফ্র্যাগমেন্ট রিটার্ন করে, যা Jest এর snapshot টেস্টিং সাপোর্ট করে।toMatchSnapshot(): এটি Jest কে কম্পোনেন্টের UI এর একটি স্ন্যাপশট সংরক্ষণ এবং পরবর্তী টেস্টে তা পরীক্ষা করতে বলে।
৬. পরিবেশে টেস্টিং সম্পন্ন করা
React Testing Library এবং Jest এর মাধ্যমে আপনার Next.js অ্যাপ্লিকেশন এর UI এবং ফাংশনাল টেস্টিং খুবই সহজ এবং কার্যকর। টেস্টগুলো অ্যাপ্লিকেশনের কর্মক্ষমতা নিশ্চিত করতে এবং নতুন কোড যোগ করার সময় পূর্ববর্তী কোডের সাথে কোনো সমস্যা হচ্ছে কিনা তা নিশ্চিত করার জন্য সহায়তা করে।
Next.js, Jest এবং React Testing Library ব্যবহার করে টেস্টিং এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী, রিলায়েবল এবং স্কেলেবল করে তুলতে পারবেন।
Read more
