Testing con Inteligencia Artificial en React

Clase 18 de 20Curso de React Testing Library

Contenido del curso

Resumen

La inteligencia artificial se ha convertido en una aliada poderosa para quienes escriben pruebas en aplicaciones React. Saber aprovecharla correctamente puede acelerar tu flujo de trabajo, pero entender testing sigue siendo indispensable para validar y corregir lo que la IA genera.

¿Cómo se usa la inteligencia artificial al hacer testing en React?

Existen dos escenarios prácticos en los que la IA aporta valor real al proceso de testing [0:04]:

  • Generar casos de prueba: le pasas un componente junto con un prompt bien estructurado y la herramienta te devuelve los tests.
  • Comprender tests existentes: cuando llegas a un proyecto con archivos de pruebas que ya existen, puedes pegar el código y pedir que te lo explique.

En ambos casos, la clave está en que tú ya sepas qué quieres lograr. La IA actúa como un asistente, no como un sustituto de tu criterio técnico.

¿Qué es prompt engineering y por qué importa en testing?

El prompt engineering es la habilidad de redactar instrucciones claras y específicas para obtener respuestas útiles de una inteligencia artificial [1:17]. En el ejemplo mostrado, el prompt incluye detalles como:

  • El rol que debe asumir la IA: desarrollador front-end con experiencia en testing.
  • El test runner a utilizar: Vitest.
  • La librería de apoyo: React Testing Library.
  • El objetivo concreto: generar casos de prueba para un componente específico.

Si solo dices "hazme el test de esto", las respuestas probablemente no serán lo que necesitas. Ser específico marca la diferencia entre una respuesta genérica y una realmente aprovechable.

¿Cómo se generó el test para el componente Order Item?

El componente Order Item, ubicado en la carpeta Components, no tenía pruebas escritas [2:06]. El proceso fue directo:

  • Se copió el código del componente.
  • Se pegó en ChatGPT junto con el prompt.
  • La IA generó siete casos de prueba listos para usar.
  • Se creó el archivo Orderitem.test.tsx en el editor de código.
  • Se ejecutaron los tests con el comando run test.

De los siete tests generados, seis pasaron y uno falló. Aquí es donde tu conocimiento de testing se vuelve crítico.

¿Qué pasa cuando un test generado por IA falla?

El test que falló se llamaba "Should display the payment method correctly formatted" [2:52]. Al revisar la terminal, el error indicaba que no encontraba el texto "credit card". El análisis reveló algo sencillo pero importante:

  • El componente transformaba el valor de payment_method usando un replace, lo que resultaba en "Credit Card" con mayúsculas.
  • ChatGPT generó la aserción buscando "credit card" en minúsculas.
  • Al copiar el valor exacto que retornaba el DOM y ajustar el test, todo pasó correctamente.

Este tipo de errores demuestra por qué no puedes confiar ciegamente en lo que genera la IA. Si no supieras leer un error de test ni analizar el DOM, no podrías corregirlo.

¿Qué puedes aprender de los tests generados por IA?

Uno de los beneficios menos obvios es que la inteligencia artificial a veces propone casos de prueba que tú no habías contemplado [3:33]. Cuando miras un componente, quizá piensas en probar X, Y y Z, pero la IA puede sugerir escenarios adicionales que amplían tu cobertura.

Esto funciona como un proceso de aprendizaje: observas esos casos, entiendes por qué tienen sentido y los incorporas a tu forma de pensar sobre testing en el futuro.

La inteligencia artificial es como tener un tutor disponible las 24 horas, pero es una herramienta más en tu arsenal. No reemplaza tu comprensión de cómo funcionan las pruebas, qué significan los errores ni cómo se comporta el DOM de tus componentes.

Si ya usas IA para generar tests, ¿qué errores interesantes has encontrado en lo que te genera? Comparte tu experiencia.