Reactjs 如何用笑话覆盖mapDispatchToProps中的行？

我的问题是我们如何在玩笑中涵盖这些台词

---

在我的组件中，这是redux连接区域的外观：

export function mapStateToProps(state) {
    return {
        formNonMember: state.form,
        submissionSuccess: state.claimSubmission.submissionSuccess
    };
}

export const mapDispatchToProps = dispatch => {
    return {
        submitClaimsForm: form => {
            dispatch(submitClaimsForm(form));
        }
    };
};

let AdditionalDetailsFormConnect = reduxForm({
    form: 'AdditionalDetails',
    destroyOnUnmount: false
})(AdditionalDetailsForm);

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AdditionalDetailsFormConnect);

import {postClaimsForm} from '../shared/services/api';

export const Actions = {
    SET_SUBMISSION_STATUS: 'SET_SUBMISSION_STATUS'
};

export const submitClaimsForm = form => dispatch => {
    return postClaimsForm(form)
        .then(res => {
            // console.log('promise returned:', res);
            return dispatch({
                type: Actions.SET_SUBMISSION_STATUS,
                submissionSuccess: true
            });
        })
        .catch(error => {
            // console.log('error returned:', error);
            return dispatch({
                type: Actions.SET_SUBMISSION_STATUS,
                submissionSuccess: false
            });
        });
};

这就是调度操作的使用方式：

onSubmit() {
    this.props.submitClaimsForm(this.props.formattedForm);
}

接下来是实际操作的样子：

export function mapStateToProps(state) {
    return {
        formNonMember: state.form,
        submissionSuccess: state.claimSubmission.submissionSuccess
    };
}

export const mapDispatchToProps = dispatch => {
    return {
        submitClaimsForm: form => {
            dispatch(submitClaimsForm(form));
        }
    };
};

let AdditionalDetailsFormConnect = reduxForm({
    form: 'AdditionalDetails',
    destroyOnUnmount: false
})(AdditionalDetailsForm);

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AdditionalDetailsFormConnect);

import {postClaimsForm} from '../shared/services/api';

export const Actions = {
    SET_SUBMISSION_STATUS: 'SET_SUBMISSION_STATUS'
};

export const submitClaimsForm = form => dispatch => {
    return postClaimsForm(form)
        .then(res => {
            // console.log('promise returned:', res);
            return dispatch({
                type: Actions.SET_SUBMISSION_STATUS,
                submissionSuccess: true
            });
        })
        .catch(error => {
            // console.log('error returned:', error);
            return dispatch({
                type: Actions.SET_SUBMISSION_STATUS,
                submissionSuccess: false
            });
        });
};

到目前为止我所尝试的：

it('mapDispatchToProps works as expected', () => {
    const actionProps = mapDispatchToProps({
        submitClaimsForm: jest.fn()
    });
    actionProps.submitClaimsForm();
    expect(submitClaimsForm).toHaveBeenCalled();
});

但是这个错误告诉我，

dispatch

是未定义的

我还有一个测试，它通过了，它告诉我已经调用了

submitClaimsForm

，但是它只覆盖了

onSubmit

的行：

it('onSubmit is called on submit', function() {
    const spyOnSubmit = jest.spyOn(wrapper.instance(), 'onSubmit');
    const mockHandleSubmit = jest.fn(wrapper.instance().onSubmit);
    const submitClaimsForm = jest.fn(wrapper.instance().submitClaimsForm);

    wrapper.setProps({
        handleSubmit: mockHandleSubmit,
        submitClaimsForm
    });

    wrapper.find('MyForm').simulate('submit');

    expect(mockHandleSubmit).toHaveBeenCalled();
    expect(spyOnSubmit).toHaveBeenCalled();
    expect(submitClaimsForm).toHaveBeenCalled();  // <--
});

it（'提交时调用onSubmit'，函数（）{
const spyonsmit=jest.spyOn（wrapper.instance（），'onSubmit'）；
const mockHandleSubmit=jest.fn（wrapper.instance（）.onSubmit）；
const submitClaimsForm=jest.fn（wrapper.instance（）.submitClaimsForm）；
包装器.setProps({
handleSubmit:mockHandleSubmit，
submitClaimsForm
});
find（'MyForm'）.simulate（'submit'）；
expect（mockHandleSubmit）.tohavebeincall（）；
expect（spyonsmit）.tohavebeincall（）；
expect（submitClaimsForm）.tohaveBeenCall（）；//您的
mapDispatchToProps按预期运行
测试失败的原因是
mapDispatchToProps
希望传入一个
dispatch
函数，而不是映射本身（这是
mapDispatchToProps
返回的）

这应该起作用：

jest.mock('./actions');
import * as actions from './actions';

it('mapDispatchToProps calls the appropriate action', async () => {
  // mock the 'dispatch' object
  const dispatch = jest.fn();
  const actionProps = mapDispatchToProps(dispatch);
  const formData = { ... };
  actionProps.submitClaimsForm(formData);
  // verify the appropriate action was called
  expect(actions.submitClaimsForm).toHaveBeenCalled(formData);
});

嗯，你想写的测试的真正目的是什么？测试
mapDispatchToProps
感觉就像你在测试
react-redux
。第二个测试在我看来更合适，尽管更像是一个集成测试。@James哦，是的，我们已经完全涵盖了操作文件…该函数
submitClaimsForm
已经过测试，但jest抱怨的只是线路覆盖率：(