测试另一个异步动作调用的异步动作

Question

我有一个异步Redux操作，它调用了另一个异步Redux操作。

我正在尝试使用Jest / Enzyme对此进行测试，但出现错误，但不确定为什么。

第一个动作-添加项目

成功添加项目后，这将调用下一个异步操作fetchItemData

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))} )
  }
}

第二动作-获取项目数据

此操作应获取项目数据以返回新添加的项目。

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)))
  }
}

测试文件：

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);
      });
    });
  });
});

错误文本

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

我不确定为什么会发生此错误。我已经传递了所有必需的参数，甚至创建了一个模拟结果对象，但似乎没有得到回退响应？

任何建议将不胜感激。谢谢。

Answer 1

对不起，我知道了。我想得太多，不需要手动分派这两个动作。

新测试文件

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);
    });
  });
});