Escribir pruebas unitarias puede ser un proceso repetitivo, pero herramientas como GitHub Copilot y ChatGPT permiten acelerar significativamente la creación de tests en proyectos de React con JavaScript. Aquí se exploran distintas estrategias para generar pruebas con inteligencia artificial, desde funciones utilitarias hasta componentes completos, incluyendo el enfoque de TDD (Test-Driven Development).
¿Cómo genera Copilot pruebas para funciones utilitarias?
El punto de partida es un proyecto de React ya configurado con Jest y React Testing Library. Dentro de la carpeta utils, existe una función 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 comienza a autocompletar las pruebas [0:36].
Los casos generados automáticamente incluyen:
- Retornar cero cuando el arreglo de productos está vacío.
- Retornar el total de un solo producto.
- Retornar la suma de múltiples productos.
Sin embargo, es fundamental revisar el código generado. En este caso, Copilot no retornó el código completo y faltaba un paréntesis de cierre. Además, el import tenía un error que debió corregirse manualmente antes de que las pruebas pasaran [1:26].
¿Se puede usar Copilot con TDD?
El enfoque de TDD consiste en escribir primero las pruebas y después la implementación. Al crear un archivo de test para una función compareDates que aún no existe, Copilot sugiere casos de prueba automáticamente [1:46]. No obstante, las primeras sugerencias no siempre son las adecuadas.
Copilot ofrece alternativas de autocompletado que se pueden explorar posándose sobre el código sugerido [2:26]. Si ninguna opción satisface, se puede escribir un prompt más específico directamente en el código: "Escribe un test para la función compararFechas que chequea si la segunda fecha es mayor que la primera. La función recibe dos objetos de tipo Date de JavaScript" [3:09].
Con ese contexto más preciso, Copilot genera pruebas coherentes:
- Retornar
true si la segunda fecha es mayor que la primera.
- Retornar
false en el caso contrario.
Al regresar al archivo de implementación, Copilot ya tiene el contexto de las pruebas y genera una función mucho más limpia y con mayor sentido [3:55].
¿Qué sucede al probar componentes de React con Copilot?
El componente OrdersCard recibe dos props: totalPrice y totalProduct, y los renderiza en pantalla. Al crear el archivo de test e importar el componente, Copilot detecta la configuración de React Testing Library en el entorno y sugiere pruebas relevantes [4:30].
Las pruebas generadas incluyen:
- Un snapshot del componente.
- Verificar que se renderice correctamente el precio total.
- Verificar la cantidad correcta de productos.
- Un test sobre una prop de tipo
date que no existe en el componente.
Este último caso es un ejemplo claro de alucinación de la IA [7:25]. Copilot inventó una prop que el componente nunca recibe, por lo que el test debe eliminarse. Esto refuerza la importancia del sentido crítico al utilizar estas herramientas.
¿Cómo se pueden agregar pruebas propias junto a Copilot?
No todo debe venir del autocompletado. Al escribir manualmente la descripción de una prueba como "Debe renderizar correctamente cuando no hay artículos", Copilot genera automáticamente el cómo se va a probar [5:36]. Este flujo permite combinar la creatividad del desarrollador con la velocidad de la IA.
Durante la ejecución, surgieron varios errores que vale la pena destacar:
- El método
render de React Testing Library no estaba importado [6:10].
- El componente mostraba
undefined cuando no recibía props, lo que reveló un bug real que se corrigió agregando default props con valor cero [6:36].
- La función
toBeInTheDocument requería una configuración adicional de entorno DOM [7:02].
¿Qué diferencias ofrece ChatGPT frente a Copilot?
ChatGPT permite un enfoque diferente: se le proporciona un prompt estructurado indicando el rol ("Eres un experto en desarrollo front-end"), la tecnología (Jest y React Testing Library) y el componente a probar [7:58]. El resultado tiende a ser más directo.
ChatGPT prueba las default props y los props personalizados en menos casos, combinando verificaciones en un solo test. Además, acompaña cada prueba con una explicación de lo que se valida [8:30].
La diferencia principal es el contexto: Copilot trabaja dentro del editor y aprovecha el entorno del proyecto, mientras que ChatGPT requiere que se le proporcione toda la información necesaria en el prompt. Ambas son complementarias y cada una brilla en escenarios distintos.
Si ya estás usando alguna herramienta de IA para escribir pruebas o generar código, comparte en los comentarios cuál te ha dado mejores resultados y cómo la integras en tu flujo de trabajo diario.
