测试mapDispatchToProps异步操作

Question

我正在尝试在调度asyncronous函数时测试我的mapDispatchToProps函数。我已经阅读了Dan Abramov关于如何测试mapDispatchToProps的建议，我正在尝试测试我的代码。

我收到了错误......

 TypeError: Cannot read property 'then' of undefined

这是我的测试......

describe("mapDispatchToProps", () => {

    const dispatchSpy = jest.fn();
    const {signupUser} = mapDispatchToProps(dispatchSpy);

    it("should dispatch signupActions.signupUser()", () => {
        // mockAxios.onPost(endpoints.SIGNUP,{})
        //         .reply(200,'test_success');
        // tried with and without mockAxios

        signupUser({})
        const spyLastCall = dispatchSpy.mock.calls[0][0];
        expect(spyLastCall)
            .toEqual(signupActions.signupUser({}));
    })

})

我要测试的功能......

export const mapDispatchToProps = dispatch => {
    return { signupUser: (user) => {
        dispatch(signupActions.signupUser(user))
            .then((response) => {
                // do something on success
            }, (error) => {
                // do something on failure
            })
    }
}

我已经测试过signupActions.signupUser，我知道它会返回一个promise。这是代码......

export function signupUser(user) {
    return (dispatch) => {
        return dispatch(rest.post(SIGNUP,user))
            .then((response) => {
                return Promise.resolve(response);
            },(error) => {
                return Promise.reject(error)
            }
        )
}}

我究竟做错了什么？

Ps：我也尝试过：

 const dispatchSpy = jest.fn().mockImplementation( () => {
    return p = new Promise((reject,resolve) => {
        resolve({})
    }) 
 }

结果相同

Answer 1

对于任何有兴趣的人，我最终使用mergeProps，这使我的测试更加清洁。我现在有...

export const mapDispatchToProps = dispatch => {
    return { dispatchSignupUser: (user) => {
        dispatch(signupActions.signupUser(user))
    }
}

export const mergeProps = (propsFromState,propsFromDispatch,ownProps) => {
    return { 
        signupUser: (values) => {
           return propsFromDispatch.dispatchSignupUser(values)
                .then(() => { // do something on success }, 
                      () => { // do something on failure})
     }
}

我分开测试它们......

describe("signup", () => {

    /// ...  ownProps and propsFromState declared here

    const dispatchSpy = jest.fn((x) => {});

    const {
        dispatchSignupUser,
    } = mapDispatchToProps(dispatchSpy);

    const signupUser = mergeProps(propsFromState,propsFromDispatch,ownProps);

    describe("mapDispatchToProps", () => {
        it("should dispatch signup user on dispatchSignupUser", () => {
            const spyOn = jest.spyOn(signupActions,'signupUser');      
            dispatchSignupUser({test: "test"});   
            expect(spyOn).toHaveBeenCalledWith({test: "test"});
        })
    })

    describe("mergeProps", () => {
        it("should do something on success", () => {
            propsFromDispatch.dispatchSignupUser jest.fn().mockImplementation((x) => {
                return new Promise((resolve,reject) => { return resolve({})} )
            });     
            return signupUser({}).then(() => {
                expect(history.location.pathname).toEqual("/signup/thank-you")
            }, (error) => {})
        })
    })

})

希望这是有帮助的！