Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
1

Cómo empezar a usar unit-testing en JavaScript

O cómo unit-testing puede salvar tu vida

En este tutorial, vamos a aprender cómo aplicar unit-testing a código escrito en JavaScript empleando la herramienta Jes
Recuerdo el momento en que unitest salvó mi vida. Había comenzado la segunda etapa de desarrollo de mi primer proyecto. La idea que estábamos ejecutando integraba un lector/escritor RFID (una antena de radio UHF junto un chip, básicamente), con una tarjeta Raspberry Pi y usando como interfaz un dispositivo Arduino. El desafío era escribir el código que unía todo esto

Intuitivamente distribuí las dependencias imaginando bloques que se interconectaban entre sí. Dispuse estos bloques en carpetas y archivos, buscando la simplicidad por un lado y orden por otro. Luego de unas semanas logré integrar todo. It’s alive!, It 's alive! Exclame, mientras un rayo iluminó mi oficina a través de la ventana >:D.

oli

Ok, no.
Funciono. Cumplí con el primer objetivo. El tema ahora era que el código fuera escalable. Comencé a ocuparme de ello y el número de dependencias creció y creció. Dolor, porque debugear el código se transformó en una pesadilla. Entonces, como caído del Cielo, un vídeo de Youtube mencionó la palabra ‘unitest’; y mi vida cuasi IMperfecta de un programador novato cambió para siempre.

platzi2.png

¿Qué son los tests unitarios (o unit-test)?

Es código que prueba otro código.

En la práctica te encontrarás escribiendo tu código tal como sueles hacerlo. Junto a esto, se escribe un segundo archivo (ubicado estratégicamente en una carpeta fuera de tu “source”/”src”), el cual contiene el testing (conjunto de pruebas)

¿Qué es Jest?

Jest es un framework de testing para JavaScript, con un enfoque en la simplicidad, diseñado para asegurar que tu código fuente quede correctamente escrito. Te permite escribir tests accesibles, amigables, con una API rica en recursos y entrega resultados rápidos.

Te funcionará en proyectos en los cuales uses Babel, TypeScript, Node, React, Angular, Vue, entre otros. Requerirá que lo configures según el uso que le des y, por lo mismo, lo puedes extender según el requerimiento que tengas. Cuenta con documentacion adecuada y la puedes encontrar aqui https://jestjs.io/docs/getting-started

Usan Jest: Facebook, Twitter, Spotify, Airbnb, Instagram; y, quizas, tu tambien 😄

¿Cómo partir?

Dale inicio a un proyecto. Como seguramente ya sabes, se ejecuta lo que sigue

$ mkdiran-awesome-app
$ cdan-awesome-app
$ npm init

Instalamos Jest como dependencia de desarrollo

$ npm install --save-dev jest

Usamos babel y para ello lo instalamos

$ npm install --save-dev @babel/preset-env

A futuro, puede que necesites otras dependencias de desarrollo. A continuación, algunas dependencias típicas

$ npm install --save-dev @babel/cli @babel/core @babel/preset-typescript babel-jest

Crea el archivo de configuración de babel en la raíz de tu proyecto (O bien, usa tu editor de código favorito).

$ touch .babelrc

El archivo .babelrc debe quedar como sigue:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "esmodules": true
                }
            }
        ]
    ]
}

A continuación, configuramos el comando para ejecutar el testing en el archivo package.json del proyecto. Agregamos la línea: “test”: “jest”. El archivo nos queda como sigue:

{
    "name": "an-awesome-app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "jest"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/preset-env": "^7.14.7",
        "jest": "^27.0.6"
    }
}

Listo! Con lo realizado hasta ahora podemos ejecutar pruebas.

¿Cómo escribo un test?

¡Excelente! Ahora vamos a por lo que vinimos. Primero, creamos una carpeta llamada test en la raíz de nuestro proyecto. Esta carpeta contiene nuestros tests.

$ mkdir __test__

Para efectos de este tutorial, emplearemos una función básica que retorna la suma de dos números. Creamos, entonces, el archivo math.js

$ touch math.js

Dentro de math.js escribimos lo siguiente:

export const suma = (a, b) => {
    return a + b;
}

Luego, creamos el test que probara que nuestra función retorne lo esperado. Dentro de la carpeta. Creamos el archivo “math.test.js”

$ cd __test__
$ touch math.test.js

Dentro de math.test.js, escribimos lo siguiente:

import { suma } from '../math';

describe('Calculo matematico', () => {
    test('Prueba de suma', () => {
        expect(suma(1, 1)).toBe(2);
    });
});

Es recomendable seguir la sintaxis en el nombre de los archivos. Es decir, si mi archivo es/esta así /src/services/unservicio.js, el test deberá llamarse service.unservicio.test.js

¿Cuál es la sintaxis del código que hemos escrito?

  • describe() permite que reunamos varias pruebas dentro de un mismo “paquete”
  • test() define un test en particular, dentro ejecutamos el código a probar y comparamos el resultado obtenido con el resultado esperado
  • expect() contiene el código a probar, en este caso, nuestra función suma(a, b)
  • .toBe() realiza la comparación entre el expect que le antecede y lo que pongamos dentro del paréntesis

En este caso, podemos interpretar el código de nuestra prueba como: describe cálculo matemático, prueba de una suma, se espera que al ejecutar la función suma con los argumentos (1, 1) se obtendrá como resultado el valor 2.

Finalmente, ejecutamos el test mediante el siguiente comando:

$ npm runtest

Dada la sencillez de la función es claro que este test será verdadero. En el fondo, estamos comprobando que la operación 1 + 1 da como resultado 2.

En la consola deberías obtener un resultado como sigue:
platzi3.png

Wow! Has realizado un test unitario usando Jest. ¡Felicitaciones!

¿Qué beneficios tiene usar test unitarios?

Primero, los test unitarios NO son perfectos. Habrá casos donde, a pesar de haber probado las dependencias, nuestro código tendrá comportamientos no deseados.

Entonces, ¿por qué pueden salvar la vida en el día a día?

  • Proporciona un trabajo más ágil
  • La calidad del código mejora
  • Es más fácil detectar errores
  • Proporciona información del uso
  • Reduce el costo de un proyecto

Fue tedioso iniciar con esto. Al principio, sentí que mi velocidad de desarrollo era más lento. Fue una percepción inicial solamente. Conforme pasó el tiempo, me percate que el código se veía mejor, mis colegas lo entendían con mayor facilidad y cometía paulatinamente menos y menos errores. Como dice alguien por ahí … poco a poco … en este mundo yo seré el developer mas duro!

Respecto al unit-testing hay mucho paño por cortar. Es decir, es un mundo muy amplio. Puedes comenzar por el grandioso curso del profesor Oscar Barajas: Curso de JavaScript Testing con Jest 2019. https://platzi.com/clases/js-jest-2019/

En tal curso aprendemos sobre las diferentes opciones que Jest posee en el caso de proyectos tipo Vanilla. Inicia desde test sencillos, como el que desarrollamos en este tutorial, hasta los primeros pasos para emplear Jest en proyectos en los cuales empleemos frameworks como React, Angular, entre otros.

¿Y tú? ¿Serás un developer así de duro? ;0

Escribe tu comentario
+ 2