使用 Jest/Enzyme 测试异步 mapDispatchToProps 操作会出错

Posted 2023-02-22

【中文标题】使用 Jest/Enzyme 测试异步 mapDispatchToProps 操作会出错

【英文标题】：Testing async mapDispatchToProps actions with Jest/Enzyme gives error

【发布时间】：2019-10-21 06:53:09

【问题描述】：

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

我收到此错误： TypeError: store.dispatch(...).then 不是函数

我尝试了 redux-mock-store https://github.com/dmitry-zaets/redux-mock-store 中包含的解决方案。我将我的中间件包含在我的 mockStore 中，但它并没有解决问题。

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

我们创建了一个函数来构建 mockStore，因此我尝试直接在我的测试文件中创建我的 mockStore，但它们都返回了相同的错误。

我不能把我尝试过的所有解决方案都放在这里，因为这需要我几周的时间，但它会给你一个想法。

这是我的测试代码：

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().then

再次，这是我每次得到的错误：TypeError: store.dispatch(...).then is not a function

提前致谢！

【问题讨论】：

actions.addData 是否返回 Promise？

@brian-lives-outdoors 是的

@brian-lives-outdoors 您似乎在使用 jest 和酶测试异步调度方面拥有丰富的经验。我的解决方案有效，但没有进入 .then 部分。我想知道是否有更好的方法来执行此操作，以便我还可以测试“showNotification”部分。

【参考方案1】：

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

首先，我必须将我的 thunk 中间件从 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 ));
        ));

有效！