reactjs - 如何用 Jest 覆盖 mapDispatchToProps 中的行?
问题描述
我的问题是我们如何开玩笑地涵盖这些行?
export const mapDispatchToProps = dispatch => {
return {
submitClaimsForm: form => {
dispatch(submitClaimsForm(form));
}
};
};
在我的组件中,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);
这就是调度操作的使用方式:
onSubmit() {
this.props.submitClaimsForm(this.props.formattedForm);
}
接下来是实际操作的样子:
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(); // <--
});
解决方案
您的mapDispatchToProps works as expected
测试失败的原因是因为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);
});
推荐阅读
- queue - 在循环队列的数组实现中将一个数据留空是否很好?
- oracle - 带有单引号的 ADF SQL 查询
- python-2.x - 对于使用 zip 的带有两个变量的循环,仍然有太多的值需要解压
- azure-devops - 将存储库移至其他项目
- html - 一次只有一个背景过滤器工作
- python - 在 DataFrame 列中搜索字典键并在新列中返回字典值
- php - 如何使用 MySQL 查询获取行数
- ajax - 是否可以在 AJAX 中使用 Amazon S3 Multipart Upload API
- asp.net-mvc-5 - IdentityServer4 替换 Asp.net 4.5 MVC5 SimpleMembership 进行身份验证
- opencv - 为什么 Opencv 想要 int32?