gpt4 book ai didi

javascript - Redux Mock Store 提供 'Actions must be plain objects. Use custom middleware for async actions.'

转载 作者:行者123 更新时间:2023-11-28 21:38:07 24 4
gpt4 key购买 nike

我正在尝试使用 redux-mock-store 在我的 React 应用程序中测试一些异步代码.

const configureMockStore = require('redux-mock-store').default;
const thunk = require("redux-thunk").default;

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

const dummy = () => {
// Mock Ajax call
return new Promise((resolve, reject) => {
setTimeout(() => resolve({data: 'data'}), 200)
})
};

describe("Redux Mock Store", () => {
it("Test Dummy Ajax call", () => {
const expectedActions = [
{ type: "SUCCESS", payload: "success" },
{ type: "FAILURE", error: { Error: "Error" } }
];
const store = mockStore({});

store.dispatch(dummy().then(() => {
expect(store.getActions()).toEqual(expectedActions)
}).catch(error => { console.log(error) }))
});
});

我正在使用 Jest 来运行这个测试。运行上面的测试 Actions must be plain objects 时出现以下错误。为异步操作使用自定义中间件。 这里有什么问题?

最佳答案

问题是您正在使用 redux-thunk 中间件,但是一旦您的 promise 解决了,您就没有分派(dispatch)任何操作(您可以查看如何定义使用 redux-thunk 的操作创建者documentation 中)。

因此,您需要定义一个 Action 创建器,它使用您的虚拟 ajax 请求并在 Action 完成后分派(dispatch)一个 Action :

const dummy = () => {
// Mock Ajax call
// Note that you are not capturing any error in here and you are not
// calling the reject method, so your *catch* clausule will never be
// executed.
return new Promise((resolve, reject) => {
setTimeout(() => resolve({ data: 'success' }), 200);
});
};

const actionCreator = () => (dispatch) => {
return dummy()
.then(payload => dispatch({ type: 'SUCCESS', payload }))
.catch(error => dispatch({ type: 'FAILURE', error }));
};

请注意 Action 创建者如何接收参数 dispatch(由 redux-thunk 中间件提供)并且我们使用该函数来分派(dispatch)我们的 Action (即简单对象) ).

一旦您使用正确的参数调用您的 Action 创建器,您应该在 it 中返回您的 promise ,以便它等待直到 promise 已解决并在 then 声明:

describe('Redux Mock Store', () => {
it('Test Dummy Ajax call', () => {
const expectedActions = [
{ type: 'SUCCESS', payload: { data: 'success' } },
];
const store = mockStore({});

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

另外,请考虑到在您的初始测试中,您希望分派(dispatch)两个 Action ,但您只调用一次 Action 创建器。您应该在另一个it 中测试失败案例。

您可以看到解决方案有效 here .

关于javascript - Redux Mock Store 提供 'Actions must be plain objects. Use custom middleware for async actions.',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55792868/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com