Web Development Redux Middleware এবং Thunk এর Testing গাইড ও নোট

Redux অ্যাপ্লিকেশনে middleware এবং Thunk গুরুত্বপূর্ণ ভূমিকা পালন করে। Middleware হল একটি ফাংশন যা Redux স্টোরে অ্যাকশন পাস করার আগে বা পরে অতিরিক্ত কাজ সম্পন্ন করতে সহায়তা করে। এর মাধ্যমে আপনি asynchronous actions, logging, error handling, এবং আরও অনেক ফিচার ইমপ্লিমেন্ট করতে পারেন। Redux Thunk একটি middleware যা asynchronous actions পরিচালনা করতে ব্যবহৃত হয়, যেমন API কল করা এবং তারপর Redux স্টেটে ডেটা আপডেট করা।

যেহেতু middleware এবং Thunk অ্যাসিনক্রোনাস কাজ করে, তাই এগুলোর টেস্টিং অন্যান্য সিনক্রোনাস কোডের তুলনায় কিছুটা আলাদা হতে পারে। এখানে আমরা Redux middleware এবং Thunk এর টেস্টিং নিয়ে আলোচনা করবো।

Redux Middleware এর Testing

Redux middleware যেমন Thunk, Logger ইত্যাদি, মূলত অ্যাকশন ডিসপ্যাচ করার আগে বা পরে স্টোরের মধ্যে পরিবর্তন আনতে ব্যবহৃত হয়। এসব middleware-এর টেস্টিং করতে সাধারণত Jest এবং Redux Mock Store ব্যবহার করা হয়। Redux Mock Store হল একটি টুল যা আপনাকে Redux স্টোরের আচরণ মক করার সুযোগ দেয়।

Redux Middleware Testing উদাহরণ

ধরা যাক, আমাদের একটি Logger middleware আছে যা প্রতিটি অ্যাকশনের নাম কনসোল লগে দেখায়।

// loggerMiddleware.js
const loggerMiddleware = store => next => action => {
  console.log('dispatching', action);
  return next(action);
};

export default loggerMiddleware;

এখন এই middleware টেস্ট করতে চাইলে আমরা Jest এবং redux-mock-store ব্যবহার করতে পারি।

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

টেস্টের জন্য:

// loggerMiddleware.test.js
import configureMockStore from 'redux-mock-store';
import loggerMiddleware from './loggerMiddleware';

const mockStore = configureMockStore([loggerMiddleware]);

describe('loggerMiddleware', () => {
  it('should log dispatched actions', () => {
    const store = mockStore({});
    const action = { type: 'TEST_ACTION' };

    // Mock console.log to track the output
    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});

    store.dispatch(action);

    // Check if loggerMiddleware logs the action
    expect(logSpy).toHaveBeenCalledWith('dispatching', action);

    // Restore the spy
    logSpy.mockRestore();
  });
});

এখানে:

• redux-mock-store ব্যবহার করে আমরা Redux স্টোর মক করেছি।
• jest.spyOn(console, 'log') দিয়ে কনসোল লগ ট্র্যাক করেছি এবং পরে চেক করেছি যে dispatching অ্যাকশনটি লগ হয়েছে কি না।

Redux Thunk এর Testing

Redux Thunk হল একটি middleware যা asynchronous actions পরিচালনা করতে সাহায্য করে। এর মাধ্যমে আপনি API কল করে ডেটা লোড করার মতো কাজ করতে পারেন। Thunk এর টেস্টিংয়ের জন্য, সাধারণত redux-mock-store এর সাথে jest ব্যবহার করা হয়।

Redux Thunk Testing উদাহরণ

ধরা যাক, আমাদের একটি API কল থাঙ্ক অ্যাকশন আছে যা ডেটা লোড করে এবং তারপর Redux স্টেটে সেই ডেটা আপডেট করে।

// actions.js
export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: data
        });
      })
      .catch(error => {
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error
        });
      });
  };
};

এখন, এই অ্যাকশন টেস্ট করতে হবে।

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

• redux-mock-store: Redux স্টোর মক করার জন্য।
• jest-fetch-mock: API কল মক করার জন্য।

টেস্ট কোড:

// actions.test.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchData } from './actions';

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

describe('fetchData action', () => {
  it('creates FETCH_DATA_SUCCESS when fetching data has been done', async () => {
    // Mock the fetch API response
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve([{ id: 1, title: 'Test Post' }]),
      })
    );

    const expectedActions = [
      { type: 'FETCH_DATA_REQUEST' },
      {
        type: 'FETCH_DATA_SUCCESS',
        payload: [{ id: 1, title: 'Test Post' }],
      },
    ];
    const store = mockStore({});

    // Dispatch fetchData action
    await store.dispatch(fetchData());

    // Check if expected actions were dispatched
    expect(store.getActions()).toEqual(expectedActions);
  });

  it('creates FETCH_DATA_FAILURE when fetching data fails', async () => {
    // Mock the fetch API to return an error
    global.fetch = jest.fn(() =>
      Promise.reject('API is down')
    );

    const expectedActions = [
      { type: 'FETCH_DATA_REQUEST' },
      {
        type: 'FETCH_DATA_FAILURE',
        payload: 'API is down',
      },
    ];
    const store = mockStore({});

    // Dispatch fetchData action
    await store.dispatch(fetchData());

    // Check if expected actions were dispatched
    expect(store.getActions()).toEqual(expectedActions);
  });
});

এখানে:

• jest.fn() এর মাধ্যমে fetch ফাংশনটি মক করা হয়েছে।
• mockStore() ব্যবহার করে Redux স্টোর তৈরি করা হয়েছে।
• store.dispatch(fetchData()) এর মাধ্যমে Thunk অ্যাকশন ডিসপ্যাচ করা হয়েছে এবং পরে অ্যাকশনগুলো যাচাই করা হয়েছে।

Redux Middleware এবং Thunk এর Testing-এর মূল বিষয়সমূহ

1. Mock Store: redux-mock-store ব্যবহার করে স্টোর মক করা হয়, যাতে কোনো রিয়েল স্টোরের প্রয়োজন না হয়।
2. Async Testing: Thunk অ্যাকশনগুলোর জন্য অ্যাসিনক্রোনাস টেস্টিং করতে async/await ব্যবহার করা হয় এবং API কল মক করতে jest-fetch-mock ব্যবহার করা হয়।
3. Jest Spies: Middleware এর টেস্টে কনসোল লগ বা অন্যান্য সাইড ইফেক্ট ট্র্যাক করতে jest.spyOn() ব্যবহার করা হয়।

সারাংশ

Redux Middleware এবং Thunk এর টেস্টিং সাধারণত redux-mock-store, Jest, এবং jest-fetch-mock ব্যবহার করে করা হয়। Middleware এর টেস্টে সাধারণত অ্যাকশন ডিসপ্যাচ করার আগে বা পরে তার কার্যক্রম যাচাই করা হয়, যেমন Logger middleware এর ক্ষেত্রে অ্যাকশনটি লগ হচ্ছে কি না তা পরীক্ষা করা হয়। Thunk অ্যাকশনের টেস্টে, অ্যাসিনক্রোনাস API কল বা অন্য যে কোনো asynchronous কাজের ফলাফল যাচাই করা হয়, এবং এটি নিশ্চিত করা হয় যে Redux স্টোরে সঠিক অ্যাকশন পাঠানো হচ্ছে।