Actions এবং Reducers এর জন্য Test Cases তৈরি করা

Redux অ্যাপ্লিকেশনের actions এবং reducers কে সঠিকভাবে টেস্ট করা অত্যন্ত গুরুত্বপূর্ণ, কারণ তারা স্টেট পরিবর্তনের মূল অংশ। Actions হল অ্যাকশন ক্রিয়েটর যা অ্যাকশন তৈরি করে, এবং Reducers হল সেই ফাংশন যা অ্যাকশন গ্রহণ করে এবং স্টেট পরিবর্তন করে।

Redux অ্যাকশনের এবং রিডিউসারের টেস্টিং সাধারণত Jest এবং Redux Mock Store এর মত টেস্টিং টুলস ব্যবহার করে করা হয়। নিচে আমরা বিস্তারিত আলোচনা করবো কিভাবে actions এবং reducers এর জন্য টেস্ট কেস তৈরি করা যায়।

Jest ব্যবহার করে Actions টেস্ট করা

Redux অ্যাকশনের টেস্টিং শুরু করতে, প্রথমে আপনাকে Jest ইনস্টল করতে হবে (যদি আপনার প্রজেক্টে এটি ইতিমধ্যেই ইনস্টল না থাকে)।

npm install --save-dev jest

Redux অ্যশন সাধারণত অ্যাকশন ক্রিয়েটর ফাংশনের মাধ্যমে তৈরি হয়। এটি একটি প্লেইন ফাংশন যা একটি type এবং প্রাসঙ্গিক payload রিটার্ন করে।

Example Action:

// actions.js
export const increment = (amount) => ({
  type: 'INCREMENT',
  payload: amount
});

export const decrement = (amount) => ({
  type: 'DECREMENT',
  payload: amount
});

এখন এই অ্যাকশনের জন্য টেস্ট কেস তৈরি করা যাক।

Action Test Case (Jest):

// actions.test.js
import { increment, decrement } from './actions';

describe('Action Creators', () => {
  test('increment action creator returns correct action', () => {
    const action = increment(5);
    expect(action).toEqual({
      type: 'INCREMENT',
      payload: 5
    });
  });

  test('decrement action creator returns correct action', () => {
    const action = decrement(3);
    expect(action).toEqual({
      type: 'DECREMENT',
      payload: 3
    });
  });
});

এখানে:

• increment(5) এবং decrement(3) কল করলে তারা সঠিক অ্যাকশন অবজেক্ট রিটার্ন করছে কিনা, তা expect দিয়ে যাচাই করা হয়েছে।
• toEqual matcher দিয়ে আমরা অ্যাকশন অবজেক্টের টাইপ এবং পে-লোড চেক করছি।

Jest ব্যবহার করে Reducers টেস্ট করা

Redux reducer হলো একটি pure function যা অ্যাকশন এবং বর্তমান স্টেট নিয়ে নতুন স্টেট রিটার্ন করে। Reducer টেস্ট করার সময়, আমরা অ্যাকশনের টাইপ এবং পে-লোডের ভিত্তিতে স্টেট চেক করি।

Example Reducer:

// counterReducer.js
const initialState = {
  counter: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + action.payload };
    case 'DECREMENT':
      return { counter: state.counter - action.payload };
    default:
      return state;
  }
};

export default counterReducer;

এখন, এই reducer-এর জন্য টেস্ট কেস তৈরি করা যাক।

Reducer Test Case (Jest):

// counterReducer.test.js
import counterReducer from './counterReducer';

describe('Counter Reducer', () => {
  const initialState = { counter: 0 };

  test('should return the initial state', () => {
    expect(counterReducer(undefined, {})).toEqual(initialState);
  });

  test('should handle INCREMENT action', () => {
    const action = { type: 'INCREMENT', payload: 5 };
    const expectedState = { counter: 5 };
    expect(counterReducer(initialState, action)).toEqual(expectedState);
  });

  test('should handle DECREMENT action', () => {
    const action = { type: 'DECREMENT', payload: 3 };
    const expectedState = { counter: -3 };
    expect(counterReducer(initialState, action)).toEqual(expectedState);
  });
});

এখানে:

• প্রথম টেস্টে, counterReducer কে কোনো অ্যাকশন না দিয়ে ডিফল্ট স্টেট (initial state) এর সাথে চেক করা হয়েছে।
• পরবর্তী দুটি টেস্টে, INCREMENT এবং DECREMENT অ্যাকশনটি ব্যবহার করে স্টেট পরিবর্তন চেক করা হয়েছে।

Redux Actions এবং Reducers এর জন্য Mock Store টেস্ট করা

Redux অ্যাকশন এবং রিডিউসারের টেস্টিংয়ের জন্য redux-mock-store ব্যবহার করা হয়। এটি Redux স্টোরের একটি মক সংস্করণ তৈরি করে, যা অ্যাকশন ডিসপ্যাচ করে এবং স্টোরের আচরণ পরীক্ষা করতে সাহায্য করে।

redux-mock-store ইনস্টল করা

npm install --save-dev redux-mock-store

Mock Store Test Case:

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk'; // If you're using redux-thunk
import { increment, decrement } from './actions';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('Actions with Mock Store', () => {
  it('creates an action to increment counter', () => {
    const expectedActions = [
      { type: 'INCREMENT', payload: 5 }
    ];
    const store = mockStore({ counter: 0 });

    store.dispatch(increment(5));

    expect(store.getActions()).toEqual(expectedActions);
  });

  it('creates an action to decrement counter', () => {
    const expectedActions = [
      { type: 'DECREMENT', payload: 3 }
    ];
    const store = mockStore({ counter: 5 });

    store.dispatch(decrement(3));

    expect(store.getActions()).toEqual(expectedActions);
  });
});

এখানে:

• mockStore দিয়ে একটি মক স্টোর তৈরি করা হয়েছে এবং increment ও decrement অ্যাকশন ডিসপ্যাচ করে, তার রিটার্ন অ্যাকশনটি চেক করা হয়েছে।

সারাংশ

Redux অ্যাকশন এবং রিডিউসারের টেস্টিং করা ডেভেলপারদের জন্য গুরুত্বপূর্ণ, যাতে অ্যাপ্লিকেশনটি প্রত্যাশিতভাবে কাজ করে কিনা তা নিশ্চিত করা যায়। Jest টেস্টিং ফ্রেমওয়ার্ক এবং redux-mock-store ব্যবহার করে, আপনি Redux অ্যাকশন এবং রিডিউসার গুলোর জন্য সহজেই টেস্ট কেস তৈরি করতে পারেন।

• Actions টেস্ট করার সময়, অ্যাকশন ক্রিয়েটর সঠিকভাবে অ্যাকশন রিটার্ন করছে কিনা তা যাচাই করতে হবে।
• Reducers টেস্ট করার সময়, অ্যাকশন ডিসপ্যাচ করার পর স্টেট সঠিকভাবে পরিবর্তিত হচ্ছে কিনা তা যাচাই করতে হবে।
• Mock Store ব্যবহার করে অ্যাকশন ডিসপ্যাচ এবং স্টোরের পরিবর্তন পরীক্ষা করা সম্ভব।

এইভাবে, আপনি নিশ্চিত হতে পারেন যে আপনার Redux স্টেট ম্যানেজমেন্ট সঠিকভাবে কাজ করছে।