Модульное тестирование на Submit с Jest - PullRequest
0 голосов
/ 01 мая 2020

Я пытаюсь проверить троичную операцию по методу ниже onSubmit().

Меня интересуют 2 вещи:

  1. getProcessor () был вызван при отправке
  2. 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...