reactjs - jestを使用したテスト環境でYupを使用して検証されていないFormikフォーム

Question

必須フィールドが空のときに検証が発生するかどうかをテストしようとしています。私の例では、空に設定したメール入力があり、送信アクションをシミュレートすると、実際には実行されるべきではない onSubmit 関数が実行されます。フォームを検証するために、Yup を使用して validationSchema プロパティを使用しています。console.log()デバッグモードで表示される送信関数内に追加しました（そうすべきではありません）。

これは開発環境で動作しています (検証が発生し、onSubmit 関数が実行されていません) が、何らかの理由で、テスト環境では動作しません。

Enzyme を使用してテストするために、コンポーネントを完全にマウントしていることに言及する価値があります。

前もって感謝します。

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