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

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

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

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

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