[英]Redux form onSubmit values empty object in testing
Values in onSubmit handler is always an empty object. onSubmit处理程序中的值始终是一个空对象。 How do I pass some values to it so that I can test the append?
如何将一些值传递给它以便我可以测试追加?
test: 测试:
const store = createStore(combineReducers({ form: formReducer }));
const setup = (newProps) => {
const props = {
...newProps,
};
expect.spyOn(store, 'dispatch');
const wrapper = mount(
<Provider store={store}>
<RegisterFormContainer {...props} />
</Provider>,
);
return {
wrapper,
props,
};
};
describe('RegisterFormContainer.integration', () => {
let wrapper;
it('should append form data', () => {
({ wrapper } = setup());
const values = {
userName: 'TestUser',
password: 'TestPassword',
};
expect.spyOn(FormData.prototype, 'append');
// Passing values as second argument DOESN'T work, it's just an empty object
wrapper.find('form').simulate('submit', values);
Object.keys(values).forEach((key) => {
expect(FormData.prototype.append).toHaveBeenCalledWith(key, values[key]));
});
expect(store.dispatch).toHaveBeenCalledWith(submit());
});
});
Container: 容器:
const mapDispatchToProps = dispatch => ({
// values empty object
onSubmit: (values) => {
const formData = new FormData();
Object.keys(values).forEach((key) => {
formData.append(key, values[key]);
});
return dispatch(submit(formData));
},
});
export default compose(
connect(null, mapDispatchToProps),
reduxForm({
form: 'register',
fields: ['__RequestVerificationToken'],
validate: userValidation,
}),
)(RegisterForm);
Component: 零件:
const Form = ({ error, handleSubmit }) => (
<form onSubmit={handleSubmit} action="">
<Field className={styles.input} name="username" component={FormInput} placeholder="Username" />
<button type="submit">
Register
</button>
</form>
);
The problem here is that you're overlooking how the actual form works. 这里的问题是你忽略了实际表单的工作原理。 If you try to simulate a
submit
event on the form, then there need to be actual form values stored in the redux store in order for redux-form to extract those values and pass them to the onSubmit
handler. 如果您尝试在表单上模拟
submit
事件,则需要存储在redux存储中的实际表单值,以便redux-form提取这些值并将它们传递给onSubmit
处理程序。
The fundamental issue is that you shouldn't test the functionality of redux-form
end-to-end within your unit tests. 根本问题是您不应该在单元测试中测试
redux-form
端到端的功能。 Testing if your app works end-to-end should happen on the integration test -level. 测试您的应用程序是否端到端应该在集成测试级别上进行测试。
My suggestions in this situation are 我在这种情况下的建议是
redux-form
correctly, that the form-to-store integration works. redux-form
,那么表单到存储集成就可以工作。 redux-form
-related components are correct and work correctly. redux-form
相关的组件的函数和值是正确的并且正常工作。 So test mapDispatchToProps
thoroughly to ensure that the functions it produces behave like you expect. 因此,
mapDispatchToProps
彻底测试mapDispatchToProps
以确保它生成的函数的行为与您期望的一样。 Then ensure you're passing the right functions and props into the right places within your components and containers. 然后确保将正确的功能和道具传递到组件和容器中的正确位置。 After that you can safely assume that everything works as long as you're using redux and redux-form right.
之后,只要您正确使用redux和redux-form,就可以安全地假设一切正常。
Hope this helps! 希望这可以帮助!
simulate接受第二个参数,即事件对象。
wrapper.find('form').simulate('submit', { target });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.