Publicado: Hace 9 días
Los placeholders son textos de utilidad que sirven como guía para describir campos que, a simple vista, podrían no ser tan fáciles de comprender para el usuario final. Por ejemplo, un campo de correo podría llevar como placeholder: "Ingresa tu correo electrónico".
En muchos casos, los placeholders no parecen tan relevantes de probar, ya que detrás suelen existir validaciones (tipo de dato, formato, requeridos, etc.) que guían al usuario. Sin embargo, si desde un inicio reducimos que sobrepiense, mostrándole un texto claro, su experiencia dentro de la aplicación mejora significativamente.
La respuesta corta es: sí, pero con una condición.
Los placeholders merecen ser probados cuando están vinculados a lógica de negocio. Es decir, cuando no son simplemente un texto estático, sino que cambian de acuerdo con alguna condición o regla definida en el sistema.
Veamos un caso práctico.
En el flujo de registro de Duolingo se solicitan cuatro campos:
Si un usuario ingresa una edad menor a 13 años, por ejemplo, 12, los placeholders de nombre y correo cambian.
En este escenario aparece un detalle importante: los placeholders dependen de la edad ingresada, y eso los convierte en un buen candidato para probarlos, ya que tienen lógica de negocio.
. . .
61: it('usuario con edad menor a 13 años', () => {
62: render(<DuolingoRegistro />)
63:
64: fireEvent.change(screen.getByTestId('edad'), { target: { value: 12 }})
65:
66: const nombre = screen.getByTestId('nombre');
67: const correo = screen.getByTestId('correo');
68:
69: expect(nombre.placeholder).toBe('Nombre del tutor');
70: expect(correo.placeholder).toBe('Correo del tutor');
71: });
. . .
En este ejemplo, primero renderizamos el componente DuolingoRegistro y modificamos el campo de edad para simular que el usuario ingresa 12 años.
Después, seleccionamos los campos de nombre y correo mediante su data-testid, y finalmente comparamos el valor de sus placeholder contra los textos esperados: "Nombre del tutor" y "Correo del tutor”.
Si quieres conocer más sobre probar tus componentes en React, te recomiendo los siguientes enlaces:
Estos son solo algunos ejemplos prácticos.
Si quieres profundizar mucho más en estrategias de testing, patrones y casos reales, te invito a leer mi libro Testing en React, donde encontrarás una guía completa paso a paso para dominar Jest y React Testing Library.