Testing con Javascript 🔍

Jorge Baumann
4 min readSep 2, 2019

--

Introducción práctica a los tests con javascript (a través de Node.js) guiada por ejemplos progresivos: “de 0 a framework” 🎉

Hola de nuevo, querido/a developer.

Existen muchas y variadas razones por las que considero que los tests son útiles e importantes.
No las vamos a mencionar ahora, pero si has leído este artículo, te habrás dado cuenta de lo importante que son los tests en el desarrollo de software en general.

☝️ Antes de continuar, recordemos lo siguiente:

  • Cuando hablemos de pruebas (o tests), nos estamos refiriendo a pruebas automáticas, entendiendo como tales el proceso de escribir código que compruebe que nuestra aplicación funciona correctamente.

Aclarado esto, ¡podemos empezar!

El proceso a seguir es el siguiente:
Primero crearemos un fichero que contenga un par de funciones y después escribiremos código (tests) que compruebe que dichas funciones se comportan correctamente.

Para que sea más fácil, he creado un repositorio en GitHub con todos los ejemplos que veremos a lo largo del artículo:

El fichero que vamos a testear es el de funcionesMatematicas.js.
Ahí dentro veremos las dos funciones (función suma y función resta) que iremos testeando de manera progresiva durante todo el artículo.

funcionesMatematicas.js

Tenemos código que hay que testear y sabemos lo que hay que hacer ¡Empecemos!

Paso 0

Apreciado developer, ¿cuál es el ejemplo de test más básico que podemos crear? Para mí, sería algo como esto:

test-0.js

Puedes ejecutar este test corriendo node test-0.js desde la terminal.
Y ya lo tenemos, ¡nuestro primer test con javascript! 🎉 🎉 🎉

Resultado de error tras ejecutar el test-0.js

Cuando lo ejecutes, debería saltarte un error. Puedes probar a cambiar las variables resultado y esperado para dejarlas con el mismo valor.
Esta vez, si lo ejecutas, verás que el error ya no aparece, y en su lugar está un mensaje: ¡Todo OK! 👌

Un test

Básicamente, esto es un test. Un valor de entrada (resultado de una operación, por ejemplo) que comparamos con otro valor (valor esperado).

Si se cumple la condición el test pasa correctamente ✅, de lo contrario veríamos el error ❌ y el test habría fallado.
En este caso la condición es que sean iguales, pero puede ser cualquier otra cosa, por ejemplo, “mayor que”.

La parte del código donde pone resultado !== esperado es lo que se conoce como aserción (o aserto), en inglés assert.
🔑 Es la parte clave de nuestro test, si la aserción falla, lanzaremos un error.

¿Y ya? ¿Así de fácil?

Desde luego que no, apreciado lector. La cosa se puede complicar mucho más, pero para entender cómo funcionan las bases, ¡nos vale!

Y por si fuera poco, resulta que probar las dos funciones de nuestro módulo funcionesMatematicas.js es extremadamente fácil, ya que son — lo que se conoce como— funciones puras.

Funciones puras 😐

Lo que más nos interesa de las funciones puras, por decirlo de manera rápida, es que dados los mismos valores de entrada (argumentos) siempre retornan lo mismo. Con este ejemplo se entiende mejor:

// Pura
const suma = (num1, num2) => num1 + num2
suma(2, 2) // => 4
suma(2, 2) // => 4
// No Pura
const tiempoMilisegundos = () => Date.now()
tiempoMilisegundos() // => 1566762448892
tiempoMilisegundos() // => 1566762450684

Recapitulemos. Sabemos cómo crear una prueba con javascript y tenemos una función pura deseosa de ser testeada.
Creo que ya sabes cual es el siguiente paso, ¿verdad?

Paso 1

Vamos a crear el test más simple posible para nuestras funciones aritméticas.

test-1.js

Ejecutamos el test desde la terminal con node test-1.js y podemos ver que la ejecución ha terminado con éxito.

Ahora probemos a “romper” la función suma. Quitamos el signo de suma (+) y ponemos el de resta (-).
Al ejecutar el test de nuevo veremos el siguiente error:

~/Code/javascript-testing/test-1.js:13
throw new Error( `${ resultado } es distinto de ${ esperado }` )
^
Error: -1 es distinto de 5
at Object.<anonymous> (~/Code/javascript-testing/test-1.js:13:9)
at Module._compile (internal/modules/cjs/loader.js:868:30)
at Object.Module._extensions..js
...

¿No es genial? 😍 Hemos roto la función suma pero nos hemos percatado gracias a nuestro test (el más básico y simple posible). ¡Somos developers orgullosos y felices!
Ahora podemos estar seguros de que si hacemos algún cambio que rompa la funcionalidad, nuestro test nos avisará. 👏

Otra parte clave de nuestras pruebas son los mensajes de error.
Los mensajes de error son realmente importantes, pues es lo primero que vemos cuando nuestro test falla y, a menudo, nos indican qué y dónde ha fallado.
Por lo tanto, querido developer, deberíamos intentar ser lo más específicos posibles a la hora de redactar los mensajes de error y de usar las aserciones correspondientes para cada caso.

Paso sentenciado, ¡a por el siguiente!

¿Quieres leer el artículo completo?

Entra en https://www.baumannzone.dev/blog/testing-con-javascript y lee todos los pasos detallados, con ejemplos completos y actualizados.

--

--

Jorge Baumann
Jorge Baumann

Written by Jorge Baumann

@baumannzone - Full Stuck JavaScript Engineer - https://baumannzone.dev

Responses (2)