Я пытаюсь проверить троичную операцию по методу ниже onSubmit()
.
Меня интересуют 2 вещи:
- getProcessor () был вызван при отправке
- getProcessor () был вызван с paymentMethod
Мой компонент определен так:
export class ProfileFormController extends Component {
constructor(props) {
super(props);
this.state = {
formConfiguration: getFormConfiguration(...)
}
render() {
return (
<Formik
initialValues={getInitialValues(
this.state.formConfiguration,
...
)}
validate={values =>
validate(...)
}
render={formData => (
<ProfileForm
formData={formData}
isFormModeAdd={this.props.isPaymentProfileFormModeAdd}
...
/>
)}
onSubmit={(values, formActions) =>
onSubmit({
getProcessor: this.props.getProcessor,
profile: this.props.profile,
saveProfile: this.props.saveProfile,
selectedProfile: this.props.selectedProfile
})
}
/>
);
}
}
const onSubmit = async ({
getProcessor,
profile,
saveProfile,
selectedProfile
}) => {
const paymentMethod = staticData.getPaymentSection().enabled
? constants.PAYMENT_METHOD_1
: constants.PAYMENT_METHOD_2;
const processor = await getProcessor(paymentMethod);
...
};
const mapStateToProps = state => ({
profile: signInSelectors.getProfile(state),
selectedProfile: selectors.getSelectedProfile(state)
});
const mapDispatchToProps = {
getProcessor: processorsOperations.getProcessor,
saveProfile: operations.saveProfile
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(ProfileFormController);
операции. js
const getProcessor = id => (dispatch, getState) => {
...
let promise = request(userProfile);
promise = dispatch(refreshSessionDecorator({ promise, request }));
return promise
.then(data => dispatch(fetchSuccess(data)))
.catch(error => dispatch(fetchError(true, error.message)))
.finally(() => dispatch(fetchLoading(false)));
};
export default {
getProcessor
};
Мой тест, который не работает:
describe('Payment profile form enabled', () => {
const onSubmitFn = jest.fn();
const component = render(
<ProfileFormController onSubmit={onSubmitFn} />
);
it('should call with Payment Method 1', () => {
staticData.getPaymentSection().enabled = true;
const saveButton = component.getByText('Save').parentElement;
fireEvent.click(saveButton);
expect(getPaymentProcessor).toHaveBeenCalledTimes(1);
expect(getPaymentProcessor).toBeCalledWith({id: PAYMENT_METHOD_1});
});
});
Может кто-нибудь, пожалуйста, помогите? Я новичок в React.