Jest এবং React Testing Library দিয়ে Unit এবং Integration Test তৈরি করা

React অ্যাপ্লিকেশনগুলোর জন্য Jest এবং React Testing Library একটি শক্তিশালী টেস্টিং টুলসেট সরবরাহ করে। Jest হল একটি টেস্টিং ফ্রেমওয়ার্ক যা JavaScript কোডের ইউনিট টেস্ট এবং ইন্টিগ্রেশন টেস্টের জন্য ব্যবহৃত হয়, এবং React Testing Library হল একটি টেস্টিং ইউটিলিটি যা React কম্পোনেন্টের ব্যবহারকারীর ইন্টারঅ্যাকশন সিমুলেট করতে সহায়তা করে। এই টুলসেটগুলো ব্যবহার করে React অ্যাপ্লিকেশনগুলির unit tests এবং integration tests খুব সহজে তৈরি করা সম্ভব।

Jest কী?

Jest হল Facebook কর্তৃক নির্মিত একটি টেস্টিং ফ্রেমওয়ার্ক, যা JavaScript কোডের টেস্টিং সহজ এবং দ্রুত করতে সহায়তা করে। Jest সাধারণত ইউনিট টেস্টিং (unit testing) এবং ইন্টিগ্রেশন টেস্টিং (integration testing) করার জন্য ব্যবহৃত হয় এবং এতে অন্তর্নির্মিত স্পাই, মকিং, টেস্ট রানার এবং কাভারেজ রিপোর্টিং রয়েছে।

React Testing Library কী?

React Testing Library হল একটি টেস্টিং লাইব্রেরি, যা React কম্পোনেন্টগুলোকে ইউজার ইন্টারফেসের (UI) দৃষ্টিকোণ থেকে টেস্ট করতে সহায়তা করে। এটি DOM-এর সাথে কাজ করে এবং কম্পোনেন্টের আউটপুট সিমুলেট করে, যাতে ব্যবহারকারী কীভাবে কম্পোনেন্টটি দেখে এবং ইন্টারঅ্যাক্ট করে তাও টেস্ট করা যায়। এর মূল উদ্দেশ্য হল কম্পোনেন্টের আভ্যন্তরীণ স্টেট বা ইমপ্লিমেন্টেশন না দেখে শুধু ইউজার ইন্টারফেসের আচরণ পরীক্ষা করা।

Unit Test তৈরি করা

Unit test হল একটি ছোট অংশের টেস্ট যা কোডের একক ফাংশনালিটি যাচাই করে। React কম্পোনেন্টের জন্য ইউনিট টেস্ট লেখার সময় Jest-এর মাধ্যমে ফাংশন বা মেথডের আউটপুট যাচাই করা হয়।

উদাহরণ: একটি সিম্পল React কম্পোনেন্টের ইউনিট টেস্ট

ধরি, আমাদের একটি কম্পোনেন্ট আছে যা একটি সংখ্যা ইনপুট নেয় এবং তার গুণফল দেখায়:

// MultiplyComponent.js
import React, { useState } from 'react';

const MultiplyComponent = () => {
  const [number, setNumber] = useState(0);
  const [result, setResult] = useState(null);

  const handleChange = (event) => {
    setNumber(event.target.value);
  };

  const handleMultiply = () => {
    setResult(number * 2);
  };

  return (
    <div>
      <input type="number" value={number} onChange={handleChange} />
      <button onClick={handleMultiply}>Multiply by 2</button>
      {result !== null && <div>Result: {result}</div>}
    </div>
  );
};

export default MultiplyComponent;

এখন, আমরা এই কম্পোনেন্টের unit test লিখবো:

// MultiplyComponent.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MultiplyComponent from './MultiplyComponent';

test('it multiplies the number by 2 and displays the result', () => {
  render(<MultiplyComponent />);

  // ইনপুট ফিল্ডে সংখ্যা দিন
  fireEvent.change(screen.getByRole('textbox'), { target: { value: '5' } });

  // Multiply by 2 বাটনে ক্লিক করুন
  fireEvent.click(screen.getByText('Multiply by 2'));

  // রেজাল্ট সঠিকভাবে প্রদর্শিত হচ্ছে কিনা চেক করুন
  expect(screen.getByText('Result: 10')).toBeInTheDocument();
});

এখানে:

• render(): কম্পোনেন্টকে DOM-এ রেন্ডার করে।
• screen.getByRole(): ইনপুট ফিল্ড এবং বাটনটি সিলেক্ট করতে ব্যবহৃত হয়।
• fireEvent.change(): ইনপুট ফিল্ডে মান পরিবর্তন সিমুলেট করে।
• fireEvent.click(): বাটন ক্লিক ইভেন্ট সিমুলেট করে।
• expect(): সঠিক আউটপুটের জন্য assertion চেক করে।

Integration Test তৈরি করা

Integration test হল একাধিক ইউনিট একসাথে কাজ করছে কিনা তা পরীক্ষা করার প্রক্রিয়া। React অ্যাপ্লিকেশনে একাধিক কম্পোনেন্ট একসাথে ইন্টারঅ্যাক্ট করলে, তাদের পারস্পরিক সম্পর্ক এবং আচরণ পরীক্ষা করতে ইনটিগ্রেশন টেস্ট ব্যবহার করা হয়।

উদাহরণ: দুটি কম্পোনেন্টের ইন্টিগ্রেশন টেস্ট

ধরি, আমাদের দুটি কম্পোনেন্ট রয়েছে: একটি ইনপুট কম্পোনেন্ট (InputComponent) যা একটি মান প্রদান করে এবং অন্যটি একটি আউটপুট কম্পোনেন্ট (OutputComponent) যা ইনপুট কম্পোনেন্টের মান গ্রহণ করে এবং প্রদর্শন করে।

InputComponent.js:

import React, { useState } from 'react';

const InputComponent = ({ onInputChange }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onInputChange(event.target.value); // প্যারেন্ট কম্পোনেন্টে মান পাঠানো
  };

  return <input type="text" value={inputValue} onChange={handleChange} />;
};

export default InputComponent;

OutputComponent.js:

import React from 'react';

const OutputComponent = ({ value }) => {
  return <div>{value}</div>;
};

export default OutputComponent;

এখন, ইনপুট এবং আউটপুট কম্পোনেন্টগুলোকে একসাথে টেস্ট করব:

// IntegrationTest.test.js
import React, { useState } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import InputComponent from './InputComponent';
import OutputComponent from './OutputComponent';

const IntegrationTest = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <InputComponent onInputChange={setInputValue} />
      <OutputComponent value={inputValue} />
    </div>
  );
};

test('it should update the output when input changes', () => {
  render(<IntegrationTest />);

  const inputElement = screen.getByRole('textbox');
  fireEvent.change(inputElement, { target: { value: 'Hello' } });

  expect(screen.getByText('Hello')).toBeInTheDocument();
});

এখানে, IntegrationTest কম্পোনেন্টটি দুটি কম্পোনেন্ট (InputComponent এবং OutputComponent) একসাথে ব্যবহার করে। আমরা ইনপুট কম্পোনেন্টে মান পরিবর্তন করে আউটপুট কম্পোনেন্টে সঠিক মান প্রদর্শিত হচ্ছে কিনা তা যাচাই করি।

সারাংশ

• Jest এবং React Testing Library ব্যবহার করে React অ্যাপ্লিকেশনগুলোর জন্য ইউনিট এবং ইন্টিগ্রেশন টেস্ট তৈরি করা সহজ।
• unit test কম্পোনেন্টের একক ফাংশনালিটি যাচাই করে, যেমন একটি ফাংশন বা মেথড কীভাবে কাজ করছে।
• integration test একাধিক কম্পোনেন্টের পারস্পরিক সম্পর্ক পরীক্ষা করে, যেমন তারা একে অপরের সাথে কীভাবে কাজ করে।
• render, fireEvent, screen, expect ইত্যাদি ফাংশন এবং মেথড ব্যবহার করে টেস্টগুলি সঠিকভাবে লেখা যায়।

Jest এবং React Testing Library এর মাধ্যমে আপনি নিশ্চিত করতে পারবেন যে আপনার React অ্যাপ্লিকেশন সঠিকভাবে কাজ করছে এবং এর প্রতিটি অংশ ঠিকভাবে ফাংশনাল।