Testing async action called by another async action

Question

I have an async Redux Action that calls another async Redux Action.

I am trying to test this using Jest / Enzyme, but I am getting an error but I am unsure as to why.

First Action - Add Item

This should call the next async action, fetchItemData, when the item is added successfully

export function addItem(payload) {
  return dispatch => {
    dispatch(requestAddItem());
    return api
      .url(`api/items`)
      .post(payload)
      .json(response => {
        dispatch(addItemSuccess(response));
        dispatch(setSearchText(response.itemName));
        dispatch(setSearchBy('itemName'));
        dispatch(setFilterByStatus(''));
        dispatch(setFilterByType(''));
        dispatch(fetchItemData(response.itemName, 'itemName', '', 'asc', '', '', 1, 25));
      })
      .catch(err => {dispatch(addItemFail(err))} )
  }
}

Second Action - Fetch Item Data

This action should fetch the item data to return the newly added item.

export function fetchItemData(text = '', searchBy = 'itemName', sortBy = '', sortOrder = 'asc', isLocked = '', isCreditCard = '', pageNumber = 1, pageSize = 25) {
  return dispatch => {
    dispatch(requestItemData());
    return api
      .query({
        searchType: searchBy,
        searchText: text,
        isLocked,
        isCreditCard,
        sortBy,
        sortOrder,
        pageNumber,
        pageSize,
      })
      .url('api/items')
      .get()
      .fetchError(err => {
        console.log(err);
        dispatch(itemAPIFail(err.toString()));
      })
      .json(response => dispatch(receiveItemData(response.items)))
  }
}

Test File:

describe('async actions', () => {
  afterEach(() => {
    fetchMock.restore();
  });

  it('creates ADD_ITEM_SUCCESS when addItem is successful', () => {
    const mockPayload = {
      itemType: "Payment",
      itemName: "Testing",
      itemDescription: "Testing",
      dateOpen: null,
      dateClose: null,
      isLocked: false,
      isExported: false,
      isCreditCard: false,
    };

    fetchMock.postOnce(`/api/items`, {
      body: mockPayload,
      headers: {'content-type': 'application/json'}
    });

    const mockResult = {
      itemId: 1,
      itemName: 'Testing'
    };

    const text = 'Testing';
    const searchBy = 'itemName';
    const isLocked = '';
    const isCreditCard = '';
    const sortBy = '';
    const sortOrder = 'asc';
    const pageNumber = 1;
    const pageSize = 25;

    fetchMock.getOnce(`api/items?searchType=${searchBy}&searchText=${text}&isLocked=${isLocked}&isCreditCard=${isCreditCard}&sortBy=${sortBy}&sortOrder=${sortOrder}&pageNumber=${pageNumber}&pageSize=${pageSize}`, {
      body: {totalItems: 1, items: mockResult},
      headers: {'content-type': 'application/json'}
    });

    const expectedActions = [
      {type: REQUEST_ADD_ITEM, response: 'waiting'},
      {type: ADD_ITEM_SUCCESS, response: mockPayload, open: false},
      {type: SET_SEARCH_TEXT, searchText: mockPayload.itemName},
      {type: SET_SEARCH_BY, searchBy: 'itemName'},
      {type: SET_FILTER_BY_STATUS, filterByStatus: ''},
      {type: SET_FILTER_BY_TYPE, filterByType: ''},
      {type: REQUEST_ITEM_DATA, waiting: true},
    ];

    const store = mockStore({});

    return store.dispatch(addItem(mockPayload)).then(() => {

      store.dispatch(fetchItemData(text, searchBy, sortBy, sortOrder, isLocked, isCreditCard, pageNumber, pageSize)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    });
  });
});

Error Text

async actions › creates ADD_ITEM_SUCCESS when addItem is successful

    fetch-mock: No fallback response defined for GET to /api/items?searchType=itemName&searchText=Testing&isLocked=&isCreditCard=&sortBy=&sortOrder=
asc&pageNumber=1&pageSize=25

I'm unsure why this error is happening. I've passed in all the required parameters and even created a mockResult object, but it seems that it's not getting a Fallback Response?

Any advice would be appreciated. Thanks.

score 0 · Answer 1 · answered Jan 07 '20 at 17:02

Sorry all, I figured it out. I was overthinking it and did not need to dispatch both actions manually.

New Test File

describe('async actions', () => {
  afterEach(() => {
    fetchMock.restore();
  });

  it('creates ADD_ITEM_SUCCESS when addItem is successful', () => {
    const mockPayload = {
      itemType: "Payment",
      itemName: "Testing",
      itemDescription: "Testing",
      dateOpen: null,
      dateClose: null,
      isLocked: false,
      isExported: false,
      isCreditCard: false,
    };

    fetchMock.postOnce(`/api/items`, {
      body: mockPayload,
      headers: {'content-type': 'application/json'}
    });

    const mockResult = {
      itemId: 1,
      itemName: 'Testing'
    };

    const text = 'Testing';
    const searchBy = 'itemName';
    const isLocked = '';
    const isCreditCard = '';
    const sortBy = '';
    const sortOrder = 'asc';
    const pageNumber = 1;
    const pageSize = 25;

    fetchMock.getOnce(`api/items?searchType=${searchBy}&searchText=${text}&isLocked=${isLocked}&isCreditCard=${isCreditCard}&sortBy=${sortBy}&sortOrder=${sortOrder}&pageNumber=${pageNumber}&pageSize=${pageSize}`, {
      body: {totalItems: 1, items: mockResult},
      headers: {'content-type': 'application/json'}
    });

    const expectedActions = [
      {type: REQUEST_ADD_ITEM, response: 'waiting'},
      {type: ADD_ITEM_SUCCESS, response: mockPayload, open: false},
      {type: SET_SEARCH_TEXT, searchText: mockPayload.itemName},
      {type: SET_SEARCH_BY, searchBy: 'itemName'},
      {type: SET_FILTER_BY_STATUS, filterByStatus: ''},
      {type: SET_FILTER_BY_TYPE, filterByType: ''},
      {type: REQUEST_ITEM_DATA, waiting: true},
    ];

    const store = mockStore({});

    return store.dispatch(addItem(mockPayload)).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

Testing async action called by another async action

1 Answers1