Web Development Testing Library এবং Jest ব্যবহার করে Redux Testing গাইড ও নোট

Redux অ্যাপ্লিকেশন পরীক্ষা (testing) করা একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা আপনার স্টোর, রিডিউসার, একশন, এবং ইউআই ইন্টারঅ্যাকশন ঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করতে সাহায্য করে। React অ্যাপ্লিকেশনগুলিতে Redux স্টোরের সাথে ইন্টিগ্রেশন টেস্টিং করার জন্য Testing Library এবং Jest ব্যবহার করা অত্যন্ত উপকারী। এই টিউটোরিয়ালে আমরা দেখবো কিভাবে Jest এবং Testing Library ব্যবহার করে Redux অ্যাপ্লিকেশন টেস্ট করা যায়।

Jest এবং Testing Library: সংক্ষিপ্ত পরিচিতি

• Jest: এটি একটি JavaScript টেস্টিং ফ্রেমওয়ার্ক যা বিশেষভাবে React অ্যাপ্লিকেশনের জন্য তৈরি করা হয়েছে। Jest ব্যবহার করে আপনি একক (unit), ইন্টিগ্রেশন, এবং স্ন্যাপশট টেস্টিং করতে পারেন।
• React Testing Library: এটি একটি টুল যা React কম্পোনেন্ট টেস্ট করার জন্য ব্যবহৃত হয়। React Testing Library DOM এর সঙ্গে ইন্টারঅ্যাক্ট করে এবং কম্পোনেন্টের আচরণ পরীক্ষা করে।

Redux অ্যাপ্লিকেশন টেস্ট করার ধাপসমূহ

Redux অ্যাপ্লিকেশন টেস্ট করার সময়, আপনি সাধারণত স্টোরের কার্যকারিতা, একশন ডিসপ্যাচিং, রিডিউসার ফাংশন এবং ইউআই (UI) ইন্টারঅ্যাকশন পরীক্ষা করবেন। এখানে Redux অ্যাপ্লিকেশন টেস্ট করার জন্য প্রয়োজনীয় ধাপগুলো আলোচনা করা হলো।

১. Redux Store টেস্ট করা

Redux স্টোরের টেস্টিং মূলত স্টেট সঠিকভাবে আপডেট হচ্ছে কিনা, এবং একশন ডিসপ্যাচ করার পর সঠিক রিডিউসার কাজ করছে কিনা তা নিশ্চিত করা।

উদাহরণ: স্লাইস এবং রিডিউসার টেস্ট

ধরা যাক, আপনার একটি Todo অ্যাপ্লিকেশন আছে, যেখানে addTodo এবং removeTodo একশন রয়েছে।

স্লাইস (todoSlice.js):

import { createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id);
    },
  },
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

স্টোর (store.js):

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

export default store;

স্লাইস টেস্ট করা:

Jest ব্যবহার করে স্লাইস এবং একশনগুলি টেস্ট করা হবে।

টেস্ট ফাইল (todoSlice.test.js):

import todoReducer, { addTodo, removeTodo } from './todoSlice';

describe('todoSlice', () => {
  let initialState;
  
  beforeEach(() => {
    initialState = [];
  });

  test('should add a todo', () => {
    const todo = { id: 1, text: 'Learn Redux' };
    const action = addTodo(todo);
    const state = todoReducer(initialState, action);
    expect(state).toHaveLength(1);
    expect(state[0]).toEqual(todo);
  });

  test('should remove a todo', () => {
    const todo = { id: 1, text: 'Learn Redux' };
    initialState.push(todo);
    const action = removeTodo({ id: 1 });
    const state = todoReducer(initialState, action);
    expect(state).toHaveLength(0);
  });
});

এই টেস্টগুলো নিশ্চিত করে যে:

• addTodo একশন স্টেটে নতুন টুডো যোগ করছে।
• removeTodo একশন স্টেট থেকে টুডো মুছে ফেলছে।

২. React কম্পোনেন্ট টেস্ট করা

Redux স্টোরের সাথে যুক্ত React কম্পোনেন্টগুলোও টেস্ট করা প্রয়োজন। React Testing Library ব্যবহার করে Redux স্টোর এবং কম্পোনেন্টের ইন্টিগ্রেশন টেস্ট করা যায়।

উদাহরণ: TodoApp কম্পোনেন্ট টেস্ট করা

React কম্পোনেন্ট (TodoApp.js):

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, removeTodo } from './todoSlice';

const TodoApp = () => {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);

  const handleAddTodo = () => {
    const todo = { id: Date.now(), text: 'Learn Redux' };
    dispatch(addTodo(todo));
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo({ id }));
  };

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => handleRemoveTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

কম্পোনেন্ট টেস্ট করা:

React Testing Library এবং Jest ব্যবহার করে TodoApp কম্পোনেন্টের টেস্ট করা হবে। এখানে আমরা Redux স্টোরের সাথে React কম্পোনেন্ট টেস্ট করব।

টেস্ট ফাইল (TodoApp.test.js):

import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from './store';
import TodoApp from './TodoApp';

describe('TodoApp', () => {
  test('should add a todo item', () => {
    render(
      <Provider store={store}>
        <TodoApp />
      </Provider>
    );
    
    const addButton = screen.getByText('Add Todo');
    fireEvent.click(addButton);

    const todoItem = screen.getByText('Learn Redux');
    expect(todoItem).toBeInTheDocument();
  });

  test('should remove a todo item', () => {
    render(
      <Provider store={store}>
        <TodoApp />
      </Provider>
    );
    
    const addButton = screen.getByText('Add Todo');
    fireEvent.click(addButton);
    
    const deleteButton = screen.getByText('Delete');
    fireEvent.click(deleteButton);

    const todoItem = screen.queryByText('Learn Redux');
    expect(todoItem).toBeNull();
  });
});

এখানে:

• render(): কম্পোনেন্টটি DOM এ রেন্ডার করে।
• screen.getByText(): একটি DOM উপাদান (যেমন, টেক্সট) অনুসন্ধান করে।
• fireEvent.click(): একটি ইউজার ইভেন্ট সিমুলেট করে (যেমন বাটনে ক্লিক করা)।
• expect(): টেস্ট assertion ব্যবহার করে নিশ্চিত করা হয় যে টেস্ট সফল হয়েছে।

এই টেস্টটি নিশ্চিত করে যে:

• Add Todo বাটনে ক্লিক করলে নতুন টুডো যোগ হচ্ছে।
• Delete বাটনে ক্লিক করলে টুডো মুছে ফেলা হচ্ছে।

৩. Mocking Dispatch in Tests

কিছু ক্ষেত্রে, আপনাকে dispatch ফাংশনটি মক (mock) করতে হতে পারে, বিশেষত যখন আপনি একশন বা রিডিউসার ফাংশন টেস্ট করতে চান।

মকিং Dispatch:

import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { useDispatch } from 'react-redux';
import TodoApp from './TodoApp';

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useDispatch: jest.fn(),
}));

describe('TodoApp', () => {
  test('should dispatch addTodo action when button is clicked', () => {
    const mockDispatch = jest.fn();
    useDispatch.mockReturnValue(mockDispatch);

    render(
      <Provider store={store}>
        <TodoApp />
      </Provider>
    );

    const addButton = screen.getByText('Add Todo');
    fireEvent.click(addButton);

    expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({ type: 'ADD_TODO' }));
  });
});

এখানে, useDispatch হুককে মক করা হয়েছে, যাতে dispatch ফাংশনটি মক করা হয় এবং আপনি টেস্টে একশন ডিসপ্যাচ চেক করতে পারেন।

সারাংশ

Redux অ্যাপ্লিকেশন টেস্টিং অত্যন্ত গুরুত্বপূর্ণ এবং এটি নিশ্চিত করে যে আপনার অ্যাপ্লিকেশন সঠিকভাবে কাজ করছে। Jest এবং React Testing Library ব্যবহার করে আপনি Redux স্টোর, রিডিউসার, একশন, এবং কম্পোনেন্টের কার্যকারিতা পরীক্ষা করতে পারেন। টেস্টিং এর মাধ্যমে আপনি আপনার কোডের স্থায়িত্ব এবং কার্যকারিতা নিশ্চিত করতে পারেন, যা দীর্ঘমেয়াদে ডিবাগিং এবং উন্নয়নে সাহায্য করে।