Prueba los flujos de cambio de correo electrónico en React sin confundir los enlaces
Cambiar el correo electrónico de una cuenta parece algo insignificante. En realidad, es una de las principales fuentes de errores de prueba.
Los testers suelen confundir los enlaces de confirmación. Una persona actualiza una dirección mientras otra abre el mensaje primero. Esto genera confusión. El equipo empieza a debatir si la página de React está rota o si el enlace pertenece al usuario equivocado.
Este problema ocurre porque los equipos tratan la bandeja de entrada como una herramienta compartida. Debes tratar la bandeja de entrada como parte del contrato de la funcionalidad.
Los procesos de cambio de correo electrónico son frágiles. Cambian una cuenta activa. El usuario ya ha iniciado sesión. A menudo hay una carrera entre los estados de correo pendiente y correo confirmado.
Los problemas comunes incluyen:
- Los mensajes de confirmación llegan a una bandeja de entrada compartida sin forma de rastrearlos.
- La UI muestra datos antiguos incluso después de que el enlace confirme la nueva solicitud.
- El backend se actualiza, pero la caché del frontend muestra la dirección antigua.
- Un tester hace clic en un enlace destinado a otra persona.
Una bandeja de entrada compartida dificulta encontrar la causa de un error. Utiliza una dirección de correo electrónico desechable única para cada ejecución de prueba en lugar de un único alias de staging.
Sigue esta secuencia limpia:
- Crea un usuario de prueba.
- Solicita un cambio de correo en la pantalla de configuración de React.
- Envía el correo a través de la ruta real del backend.
- Dirige el mensaje a una bandeja de entrada que pertenezca únicamente a esta prueba.
- Abre el enlace y verifica que la pantalla de configuración se actualice con la nueva dirección.
Esto mantiene clara la propiedad. Sabrás qué enlace proviene de qué usuario.
Para aplicaciones React, sigue una regla adicional. Realiza la aserción de la pantalla solo después de una lectura de datos fresca. No confíes en el estado optimista del cliente. Una mutación puede devolver éxito, pero una recarga de página podría traer de vuelta el valor antiguo si el backend no finalizó el cambio.
Una buena prueba de extremo a extremo (end-to-end) debe verificar estos puntos:
- El correo se envió a la dirección pendiente y no a la antigua.
- El enlace apunta al host del entorno correcto.
- El enlace actualiza el registro de la cuenta.
- La dirección antigua desaparece tras un refetch.
- Reutilizar el mismo enlace falla de forma segura.
Si la caché de React query o el almacén del cliente (client store) están desactualizados, la funcionalidad parecerá rota. Al cliente solo le importa que la pantalla de configuración muestre la realidad.
También deberías añadir un ID de correlación a cada solicitud. Esto te ayuda a rastrear una solicitud desde el usuario hasta la entrega del mensaje y la confirmación final.
Las bandejas de entrada aisladas no sustituyen a las pruebas unitarias. Utiliza pruebas unitarias para la validación de formularios y errores de la API. Utiliza el flujo de la bandeja de entrada para demostrar que la ruta real del cliente funciona en todos los sistemas.
Antes de enviar cambios a la configuración de la cuenta, comprueba estos elementos:
- Solicita el cambio desde la UI real de React.
- Confirma que el mensaje llegue a una bandeja de entrada específica de la ejecución.
- Verifica que la nueva dirección aparezca tras un refetch.
- Asegúrate de que el enlace antiguo no pueda reutilizarse.
- Confirma que los registros de auditoría muestren quién inició el cambio.
Esto evita errores en los que todo parece estar bien de forma aislada pero falla en el mundo real.