Tengo el siguiente código:
<Formik initialValues={{ name: '', email: '', password: '', passwordConfirmation: '', }} validationSchema={Yup.object( { name: Yup.string() .required('Required'), email: Yup.string() .email('Invalid email address') .required('Required') .when('email', { is: true, then: Yup.string().test( 'checkEmailAvailability', 'An account with this email already exists', async (value) => { const auth = getAuth(); const signInMethods = await fetchSignInMethodsForEmail( auth, value ); if (signInMethods.length) return false; return true; } ), }), password: Yup.string() .min(6, 'Must be at least 6 characters') .required('Required'), passwordConfirmation: Yup.string().oneOf( [Yup.ref('password'), null], "Passwords don't match" ), }, ['email'] )} onSubmit={(values, { setSubmitting }) => { ... }} Este es Formik usando Yup para validar si el correo electrónico ya existe en una base de datos de Firebase. El problema inicial que encontré después de escribir una prueba es que todas las validaciones se ejecutaron al mismo tiempo, lo que provocó que Firebase arrojara un error. Traté de resolver este problema agregando when . No estoy seguro de si esta prueba condicional funciona (es decir, si then: Yup.string().test(... is valid) porque cuando ejecuto obtengo el Error: Cyclic dependency, node was:"email" error. Soluciones para este problema sugiero agregar una matriz de dependencia al final del script, lo cual hice ... sin embargo, esto no resolvió el problema.
Estoy atascado y se me acabaron las ideas. ¿Cómo puedo hacer que este código funcione para obtener lo que necesito?
El problema fue que mi solución no tiene sentido porque el campo depende de sí mismo y no hay forma de salir de esto.
Desafortunadamente, hasta donde yo sé, Yup no proporciona una solución limpia para que .test se llame de forma asincrónica, lo que resulta en una llamada innecesaria a la base de datos o arroja un error como en mi caso.
Para resolver el problema, utilicé la siguiente solución: ¿Cómo configurar mensajes de error dinámicos en la validación asíncrona de Yup? .
Escribí una función que verifica sincrónicamente: campo vacío, formato no válido y si el correo electrónico existe en la base de datos y usé la solución vinculada anterior para mostrar el error.
Es muy contrario a la intuición escribir una función separada para manejar la validación de formularios en Yup, ya que Yup ya tiene métodos para eso... pero como puede ver, no es perfecto.