Question

派发异步函数时，我正在尝试测试mapDispatchToProps动作。我几乎尝试了所有可能的解决方案，但到目前为止没有任何效果。我总是遇到相同的错误：

我收到此错误： TypeError：store.dispatch（...）。然后不是函数

我尝试了redux-mock-store https://github.com/dmitry-zaets/redux-mock-store中包含的解决方案。我将中间件包括在我的模拟存储中，但是并不能解决问题。

我在这里Testing dispatched actions in Redux thunk with Jest尝试了Michael Peyper提出的解决方案。

我们创建了一个用于构建模拟存储的函数，因此我尝试直接在测试文件中创建模拟存储，但是它们都返回了相同的错误。

我无法将我尝试过的所有解决方案都放在这里，因为这可能需要花费我数周的时间，但是它给了您一个主意。

这是我测试的代码：

describe('Component async actions', () => {
        const middlewares = [thunk, queryMiddleware];
        const createMockStore = configureStore(middlewares);
        const store = createMockStore();

        afterEach(() => {
            jest.clearAllMocks();
        });

        const someData = {};

        const expectedActions = { 
            type: ADD_DATA,
            payload: someData
        };

        it('should handle addData', () => {
            return store.dispatch(actions.addData(someData)).then(() => {
                expect(store.getActions()[0]).toEqual(expectedAction);
            });
        });
 });

这是我的mapDispatchToProps：

function mapDispatchToProps(dispatch) {
    return {
        addData: data => dispatch(addData(data))
            .then(({ status }) => {
                dispatch(showNotification({ status }));
            }),
    };
};

如果我的测试中有任何错误，我希望至少能够到达期望的部分并解决此问题，但我无法通过dispatch（）。然后

再次，这是我每次遇到的错误：TypeError：store.dispatch（...）。那么那不是函数

谢谢！

Answer 1

我不知道是否有人会遇到这个问题，但是我找到了解决方法。

首先，我不得不将redunk中间件从redux-mock-store添加到我的createStore中。

import thunk from 'redux-thunk';

...

const createMockStore = createStore([thunk]);

然后我对我的addData函数进行了模拟，如下所示：

import { addData } from 'path/to/addData';

...

jest.mock('path/to/addData');

并且我在测试中添加了以下代码：

addData.mockReturnValue(() =>
        new Promise((resolve) => resolve({ status: 200 }));
        ));

有效！

使用Jest / Enzyme测试异步mapDispatchToProps操作会产生错误

1 个答案: