测试react异步操作创建者-未定义的数据

Question

我有以下操作和测试用例-当我运行此测试时(jest(-我看到TypeError：无法读取操作创建者中未定义的属性"data"，不确定这里缺少什么？我正在提供预期的mockData。是因为这里嵌套了一个异步吗？但我正在使用`.then，但它仍然失败。

Action creator:
export const getUser = ({
uname,
apiendpoint,
}) => {
const arguments = {};

return async (dispatch) => {
await axiosHelper({ ---> this will return axios.get
arguments,
path: `${apiendpoint}/${uname}`,
dispatch,
}).then(async ({ data, headers }) => { -- getting error at this line.
dispatch({ type: GET_USER, payload: data });
dispatch({ type: GET_NUMBEROFUSERS, payload: headers });
});
};
};
Test:
describe('Get User Action', () => {
let store;
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
beforeEach(() => {
store = mockStore({
data: [],
});
});
afterEach(() => {
fetchMock.reset();
fetchMock.restore();
})
const arguments = {
uname: 'user123',
apiendpoint: 'test',
};
const url = 'https://www.localhost.com/blah/blah';
it('should get a User', () => {
fetchMock
.getOnce(url, {
data: mockData, -->external mock js file with user data {}
headers: {
'content-type': 'application/json'
}
});
const expectedActions = [
{
type: 'GET_USER',
data: mockData
},
{ type: 'GET_NUMBEROFUSERS' }
];

return store.dispatch(actions.getUser(arguments)).then(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});

Answer 1

您在同一函数上使用await和then(例如axiosHelper(。

这是错误的用法，会导致undefined出现许多错误。您可以使用回调函数或.then()，也可以使用await，但不能使用2个或全部。

我建议看一些关于async/await的教程/解释，因为了解什么是Promise非常重要

在cas中发生的情况是axiosHelper被执行了两次，因为如果它完成了，then-部分将启动，但同时(因为它是异步的(await完成，代码执行继续父流。这带来了竞争条件，正如我所说，将导致undefined，因为您正在执行相同的逻辑两次或两次以上。