Test mapDispatchToProps async Aktionen

Question

Ich versuche, meine MapDispatchToProps Funktion zu testen, wenn eine asynchrone Funktion ausgelöst wird. Ich habe die Vorschläge von Dan Abramov gelesen, wie man mapDispatchToProps testet, und ich versuche, meinen Code als solchen zu testen.

ich die Störung erhalte ...

TypeError: Cannot read property 'then' of undefined 

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

}) 

Die Funktion, die ich testen wollen ...

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

Ich habe signupActions.signupUser bereits getestet und weiß, dass es ein Versprechen zurückgibt. Hier ist der Code ...

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

Was mache ich falsch?

Ps: Ich habe auch versucht:

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

mit dem gleichen Ergebnis

Answer 1

Für jeden, der interessiert ist, landete ich mit mergeProps auf, die meinen Tests viel sauberer gemacht hat. Jetzt habe ich ...

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

und teste ich sie separat ...

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

}) 

Hoffentlich ist das hilfreich!