1

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

这在开发环境中工作（提出验证，未执行 onSubmit 函数）但由于某种原因，它在测试环境中不起作用。

值得一提的是，我正在完全安装组件以使用 Enzyme 对其进行测试。

提前致谢。

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

这是我的代码：

表单.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>
    );
  }

测试.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();
    });
  });
4

1 回答 1

1

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

以下对我有用。

 test("Formik validation", async () => {
    const tree = mount(<YourForm />);
    // Submit the form and wait for everything to resolve.
    tree.simulate('submit', {
       // Formik calls e.preventDefault() internally
       preventDefault: () => { }
    });
    await new Promise(resolve => setImmediate(resolve));
    tree.update();
    expect(yourPasswordInput.props().error).toBeTruthy();
});
于 2019-07-31T08:20:52.140 回答