使用笑话和酶进行测试时，Formik 不会更新错误

Question

我有一个 Formik 注册表单，已通过 yup 验证。当验证架构未满足时，我想显示错误组件。一切都在浏览器中运行，但是当我进行测试时，即使应该已经存在错误，并且酶的行为就像没有错误一样。有人可以告诉我我做错了什么吗？这很奇怪，因为当我将 console.log(errors.email) 放入 Formik 的返回函数中时，我看到“它似乎不是有效的电子邮件地址”。我的测试控制台中出现错误。另一方面，当我将 erros.email 放入 Formik 的返回函数中时，在测试中它看起来不存在。

// SignUp.tsx
const SignUp: React.FC = () => {
  const { register, errorMessage } = React.useContext(AuthContext);

  const initialValues = {
    email: '',
    password: '',
    passwordRepeat: '',
  };

  const hasErrors = (errors: FormikErrors<typeof initialValues>) => {
    return Object.keys(errors).length !== 0 || errorMessage;
  };

  const allFieldsWereTouched = (touched: FormikTouched<typeof initialValues>) => {
    return Array.from(Object.values(touched)).filter((wasTouched) => wasTouched).length === Object.keys(initialValues).length;
  };

  const signUpValidationSchema = Yup.object().shape({
    email: Yup.string().email('It does not seem to be a valid email address.'),
    password: Yup.string().min(5, 'Password must have at least 5 characters.').max(15, 'Password must not have more than 15 characters.'),
    passwordRepeat: Yup.string().oneOf([Yup.ref('password')], 'Both passwords must be equal.'),
  });

  const submitForm = (values: typeof initialValues) => {
    register(values.email, values.password);
  };

  return (
    <AuthWrapper>
      <h3 className={classes.authModalTitle} data-test='signup-modal-title'>
        Sign Up
      </h3>
      <Formik initialValues={initialValues} onSubmit={submitForm} validationSchema={signUpValidationSchema}>
        {({ errors, touched }) => {
          return (
            <Form>
              <FormikTextInput type='email' name='email' description='E-mail address' as={Input} />
              <FormikTextInput type='password' name='password' description='Password' as={Input} />
              <FormikTextInput type='password' name='passwordRepeat' description='Password repeat' as={Input} />
              {errors.email && <Error message={errors.email || errors.password || errors.passwordRepeat || errorMessage} />}
              <Button className={classes.buttonAdditional} type='submit' dataTest='signup-button'>
                Open account
              </Button>
            </Form>
          );
        }}
      </Formik>
      <FormInfo question='Already have an account?' answer='Sign in' path='SignIn' />
    </AuthWrapper>
  );
};

export default SignUp;

// SignUp.test.tsx

const setup = () => {
  return mount(
    <MemoryRouter>
      <AuthContextProvider>
        <SignUp />
      </AuthContextProvider>
    </MemoryRouter>
  );
};

describe('<SignUp />', () => {
  let wrapper: ReactWrapper;

  beforeEach(() => {
    wrapper = setup();
  });

  afterEach(() => {
    wrapper.unmount();
  });

  describe('showing errors', () => {
    const simulateTyping = async (name: string, value: string | number) => {
      const formField = formikFindByInputName(wrapper, name);
      formField.simulate('change', { target: { name, value } });
      formField.simulate('blur');
    };

    const checkErrorExistance = (wrapper: ReactWrapper, condition: boolean) => {
      const error = findByTestAttr(wrapper, 'error');
      expect(error.exists()).toBe(condition);
    };

    it('does not show error when email input value is wrong but not all inputs were touched', () => {
      simulateTyping('email', 'test');
      checkErrorExistance(wrapper, true);
    });
    
    
  });
});

Answer 1

我遇到了同样的问题，必须自己运行 validateForm，所以类似：

<Formik>{({..., validateForm}) => 
  <Button onClick={async () => {const newErrors = await validateForm?.()}} />

然后检查 newErrors。