Resumen

Escribir pruebas unitarias de forma ágil es una ventaja competitiva para cualquier equipo de desarrollo front-end. Apoyarse en herramientas de inteligencia artificial como GitHub Copilot y ChatGPT permite generar casos de prueba en segundos, aplicar TDD y detectar errores antes de que lleguen a producción. A continuación se desglosa el flujo completo para lograrlo en un proyecto de React con Jest y React Testing Library.

¿Cómo genera Copilot pruebas para funciones JavaScript?

El punto de partida es una función utilitaria que calcula el total del precio de productos. Al crear el archivo de test e importar la función, Copilot obtiene el contexto necesario y autocompleta las pruebas [0:28]. Los casos que sugiere son:

  • Retornar cero cuando el arreglo de productos está vacío.
  • Retornar el total de un solo producto.
  • Retornar la suma de múltiples productos.

Es fundamental revisar la salida: en ocasiones Copilot no cierra correctamente paréntesis o genera un import incorrecto [1:17]. Tras corregir esos detalles, las pruebas pasan sin problema.

¿Qué es TDD y cómo aplicarlo con Copilot?

Test-Driven Development consiste en escribir primero la prueba y después la implementación. Se crea un archivo de test para una función compareDates que todavía no existe [1:40]. Copilot sugiere casos de uso, pero no siempre coinciden con la intención del desarrollador. Para obtener mejores resultados se puede:

  • Explorar las alternativas de autocompletado que ofrece Copilot al posarse sobre la sugerencia [2:22].
  • Escribir un prompt explícito dentro del comentario, por ejemplo: "Escribe un test para la función compararFechas que chequea si la segunda fecha es mayor que la primera" [3:08].

Con ese contexto más preciso, Copilot genera dos casos claros: cuando la segunda fecha es mayor y cuando es menor. Después, al ir al archivo de implementación, la función se autocompleta con la lógica correcta basada en las pruebas ya escritas [3:55].

¿Por qué es importante el sentido crítico al usar IA?

Copilot puede producir alucinaciones: pruebas que verifican props inexistentes o comportamientos que el componente no tiene [6:44]. Un ejemplo concreto ocurre al probar el componente OrderCard, donde Copilot genera un test que espera un prop de tipo fecha que nunca se definió en el componente. Ese test debe eliminarse manualmente.

¿Cómo probar componentes de React con Copilot?

El componente OrderCard recibe dos props —totalPrice y totalProduct— y los renderiza en pantalla [4:20]. Al crear el archivo de test e importar el componente, Copilot sugiere:

  • Un snapshot del componente.
  • Verificar que el precio total se renderice correctamente.
  • Verificar la cantidad de productos.

También es posible guiar a Copilot escribiendo el inicio de la prueba. Por ejemplo, al escribir "debe renderizar correctamente cuando no hay artículos", el autocompletado genera la aserción esperada [5:24].

Durante la ejecución aparecen errores reales que aportan valor:

  • Falta importar el método render de React Testing Library [5:50].
  • El componente no maneja el caso en que no recibe props, mostrando undefined. La solución es agregar default props con valor cero [6:14].
  • Jest necesita la configuración de @testing-library/jest-dom para que métodos como toBeInTheDocument funcionen [6:30].

Estos hallazgos demuestran que las pruebas no solo validan código existente, sino que descubren bugs en el componente.

¿Qué diferencias ofrece ChatGPT frente a Copilot?

ChatGPT se utiliza desde su interfaz con un prompt estructurado: "Eres un experto en desarrollo front-end con JavaScript y React. Escribe las pruebas unitarias del siguiente componente utilizando Jest y React Testing Library" [7:22]. Se pega el código del componente y ChatGPT devuelve:

  • Un test que verifica las default props con valores por defecto.
  • Un test que valida el renderizado con props específicos.

La diferencia principal es que ChatGPT prueba ambas props en un solo caso, va más directo al punto y añade una explicación de cada bloque [7:50]. Copilot, en cambio, trabaja dentro del editor y genera sugerencias incrementales línea a línea.

Ambas herramientas aceleran el proceso de escritura de pruebas, pero ninguna reemplaza la revisión humana. Detectar alucinaciones, corregir imports y validar la lógica sigue siendo responsabilidad del desarrollador. ¿Qué herramienta de IA te ha dado mejores resultados al escribir pruebas unitarias? Compártelo en los comentarios.