Форма Formik не проверена с помощью Yup в тестовой среде с Jest - PullRequest
Новая
       14

Форма Formik не проверена с помощью Yup в тестовой среде с Jest

0 голосов
/ 23 мая 2019

Я пытаюсь проверить, если проверка повышается, когда обязательное поле пусто.В моем примере у меня есть ввод по электронной почте, который я установил пустым, и когда я имитирую действие отправки, функция onSubmit выполняется, хотя в действительности этого не должно быть.Я использую свойство validationSchema, используя Yup для проверки моей формы.Я добавил console.log() в мою функцию отправки, которая отображается в режиме отладки (и не должна).

Это работает в среде разработчиков (проверки выполнены, функция onSubmit не выполнена), но по какой-то причине, это не работает в тестовой среде.

Стоит отметить, что я полностью монтирую компонент, чтобы протестировать его с помощью Enzyme.

Заранее спасибо.

IЯ пытался с помощью .update проверить, обновляется ли хотя бы представление после имитации действия, но он все еще вызывает функцию отправки.

Вот мой код:

form.js 

  render() {
    const { intl } = this.props;

    return (
      <div className="signupForm">
        <Formik
          initialValues={{ email: '', password: '', passwordConfirmation: '' }}
          onSubmit={this.submitForm}
          validationSchema={SignUpSchema}
          render={ formProps => (
            <Form>
              <p className="signupForm__message">{formProps.errors.general}</p>
              <FormControl margin="normal" fullWidth>
                <Field
                  type="text"
                  name="email"
                  component={TextField}
                  className='signupForm__input'
                  label={intl.formatMessage(messages.email)}
                />
              </FormControl>

              <FormControl margin="normal" fullWidth>
                <Field
                  type="password"
                  name="password"
                  component={TextField}
                  className='signupForm__input'
                  label={intl.formatMessage(messages.password)}
                  fullWidth
                />
              </FormControl>

              <FormControl margin="normal" fullWidth>
                <Field
                  type="password"
                  name="passwordConfirmation"
                  component={TextField}
                  className='signupForm__input'
                  label={intl.formatMessage(messages.passConfirmation)}
                  fullWidth
                />
              </FormControl>

              <Button
                type="submit"
                fullWidth
                variant="contained"
                className='signupForm__button'
                disabled={formProps.isSubmitting}
              >
                <FormattedMessage id="login.form.submit" />
              </Button>

              {formProps.isSubmitting && <Loading />}
            </Form>
           )
         }
        />
      </div>
    );
  }

test.js 


  describe('submit with blank password', () => {
    beforeEach(() => {
      subject = mount(withStore(<SignUpPage />, store));
      // load invalid data to the form
      email.simulate('change', { target: { name: 'email', value: 'joe@joe.com' } });
      password.simulate('change', { target: { name: 'password', value: '' } });
      passwordConfirmation.simulate('change', { target: { name: 'passwordConfirmation', value: 'password' } });
      form.simulate('submit');
    });

    it('should display an error in the password field', () => {
      subject.update();
      const passwordInput = subject.find('TextField').at(1);
      expect(passwordInput.props().error).toBeTruthy();
    });
  });
...