How do I test async actions in React-Redux?

How do I test async actions in React-Redux?

To test async actions in React-Redux, you can use libraries like Jest and Redux Mock Store. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example using Jest and Redux Mock Store:

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

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

test('fetchData action', () => {
  const store = mockStore({});
  return store.dispatch(fetchData()).then(() => {
    const actions = store.getActions();
    expect(actions[0]).toEqual({ type: 'FETCH_DATA_SUCCESS', payload: data });
  });
});

This tests an async action that fetches data.

What if the fetch fails?

You can test the failure case by mocking the fetch call to reject. Here's how:

jest.mock('node-fetch');
import fetch from 'node-fetch';

fetch.mockImplementation(() => Promise.reject('API is down'));

test('fetchData action failure', () => {
  const store = mockStore({});
  return store.dispatch(fetchData()).then(() => {
    const actions = store.getActions();
    expect(actions[0]).toEqual({ type: 'FETCH_DATA_FAILURE', error: 'API is down' });
  });
});