Question

我试图测试在必填字段为空时是否引发了验证。在我的示例中，我有一个电子邮件输入，将其设置为空，并且当我模拟提交操作时，实际上不应该执行onSubmit函数。我使用Yup来验证表单的属性。我已经在提交功能内添加了console.log()，该功能以调试模式显示（不应显示）。

这在开发人员环境中有效（引发了验证，onSubmit函数未执行），但由于某种原因，它在测试环境中不起作用。

值得一提的是，我已经完全安装了该组件以使用酶对其进行测试。

谢谢。

我尝试使用.update检查模拟动作后是否至少更新了视图，但是它仍然调用Submit函数。

这是我的代码：

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();
    });
  });

Answer 1

尽管Formik的handleSubmit是一个同步函数，但是使用yup函数进行的验证被异步调用。

以下内容对我有用。

source ~/.bash_profile

无法在测试环境中使用Yup验证Formik表单

1 个答案: