如何在 reactjs + redux + redux thunk 上通过 Jest - Enzyme - Sinon 测试道具功能

问题描述

我是单元测试的新手，我不知道我做得对还是不对，我找不到任何方法来实现这一点。

所以起初，我有一个类似于这里的动作 Axios testing with redux-thunk (moxios-jest-enzyme)

我不知道为什么，我的 thunk 道具从来没有被 Sinon.spy 触发过

这是我目前所拥有的：

// login.js

export class Login extends Component {

// ....

onSubmit = (event,errors,value) => {
        if(errors <= 0){
            this.setState({
                email : value.email
            });
            let param = {
                username : value.email,password : value.password
            }
            if (this.props.isSuccessCheckEmail){
              this.props.postLogin(param)
            } else {
               // here im checking if the props will be anonymous function,but i got `Undefined`
              console.log('checking',this.props.checkEmail())
              
              this.props.checkEmail(param)
            }
        }
    }

// ......
}
const mapStatetoProps = (state) => {
    return {
        isLoading : state.AuthReducer.isLoading,isSuccessCheckEmail: state.AuthReducer.isSuccessCheckEmail,email: state.AuthReducer.email
    };
};

const mapdispatchToProps = (dispatch) => {
    return {
        checkEmail: (param) => dispatch(checkEmail(param)),};
};

export default compose(
    connect(
        mapStatetoProps,mapdispatchToProps
    ),withRouter
)(Login);

// action.js

// submit checking email
export function checkEmail(param) {
    return (dispatch,getState) => {
        dispatch(checkingEmail())
        // this will call `axios` POST method
        AUTH.checkEmail(param).then((response) => {
            let data = response.data
            if (data.Meta.code === 200) {
                dispatch(checkingEmailSuccess(data.data))
            } else {
                dispatch(submitLoginFailed(data.Meta))
            }
        }).catch((err) => {
            dispatch(submitLoginFailed(err?.response ? err?.response?.data : {message: 'Something went wrong'}))
        })
    }
}

// login.test.js

it("check when user fill the email,it will trigger checkEmail function",() => {
    const resetLoginState = sinon.spy();
    const resetCheckEmailState = sinon.spy();
    const checkEmail = sinon.spy();
    let props = {
      resetLoginState,resetCheckEmailState,checkEmail
   };
    const wrapper = mount(<Login {...props}/>);

    expect(resetLoginState.called).toBeTruthy();
    expect(resetCheckEmailState.called).toBeTruthy();
    expect(wrapper.find('AvForm')).toHaveLength(1);
    wrapper.find('input').simulate('change',{ target: { value: '[e-mail]' } });
    wrapper.find('AvForm').simulate('submit');
    expect(checkEmail.called).toBeTruthy();
  });

我的目标是在用户想要通过查看服务的电子邮件登录时测试 checkEmail 功能，如果可以，我很高兴看到如何使用 Sinon 检索通过模拟更改输入的电子邮件。>

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）