Home test mapDispatchToProps async actions
Reply: 1

test mapDispatchToProps async actions

user1795370
1#
user1795370 Published in 2017-12-23 00:19:35Z

I am trying to test my mapDispatchToProps function when an asyncronous function is dispatched. I have read Dan Abramov's suggestions on how to test mapDispatchToProps and I am trying to test my code as such.

I am getting the error...

 TypeError: Cannot read property 'then' of undefined

Here is my test...

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({}));
    })

})

The function that I want to test...

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

I have already tested signupActions.signupUser and I know that it returns a promise. Here is the code...

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

What am I doing wrong?

Ps: I also tried:

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

with the same result

user1795370
2#
user1795370 Reply to 2017-12-26 21:35:41Z

For anyone who is interested, I ended up using mergeProps which has made my tests a lot cleaner. Now I have...

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})
     }
}

and I test them separately...

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) => {})
        })
    })

})

Hopefully this is helpful!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.298833 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO