Vamos a aprender a usar Jest desde 0 con un ejemplo muy fácil

¿Qué es Jest?

Jest es un framework de testing desarrollado por Facebook. El equipo de desarrollo fue el mismo que el de React.

Puedes usar Jest con lo que quieras, no sólo con React. Jest se ha hecho muy popular porque es muy fácil de configurar, ya lo veremos.

Pues ir a su página oficial para saber más acerca de este framework de test.

Iniciamos un proyecto de npm

Para iniciar un proyecto de npm:

npm init -y

Se nos creará el package.json

Instalamos Typescript para el entorno de desarrollo

npm i typescript -D

Iniciamos un proyecto de Typescript

npx tsc --init

Instalar Jest en modo de desarrollo

Recuerda que los test sólo se realizarán durante el desarrollo del proyecto, una vez que pasemos a producción no será necesario Jest.

npm i -D jest

npm i -D ts-jest

Instala también el tipado para Typescript de Jest, obviamente en el entorno de desarrollo.

npm i --save-dev @types/jest

Configurar Jest

Lo primero que haremos será ejecutar:

npx jest --init

A la pregunta de si deseo utilizar Jest cuando ejecute el script de test del package.json yo le digo que sí.

A la pregunta de si quiero utilizar Typescript para el fichero de configuración yo le digo sí, siempre Typescript.

Para escoger el entorno (environment) yo escogeré node que es para no utilizar navegadores, por ejemplo, en el ejemplo que voy a realizar no usaré el DOM ni nada.

Le digo que sí quiero informes para mostrar el grado de cubrimiento de mis test.

Elijo v8

La siguiente es la más importante, que será la de limpiar los mocks entre cada test, decir que sí, que limpie siempre. Si no lo haces así, tendrás que limpiar manualmente los mocks cada vez que corras los tests, y como es muy común que se me olvide pues le digo que lo haga él.

Inicia ts-jest

npx ts-jest config:init

Creando nuestra primera prueba para ver que todo está OK

Creamos un fichero para los test, es importante que el nombre del fichero termine con .test.ts, ya que jest lo que hará será ejecutar todos los archivos que terminen en .test.ts

En el fichero creado programamos nuestra primera prueba:

  describe('mi-primer-test', () => {
    test('test', ()=>{
        expect(true).toBe(true);
    })    
  });
  

Guardamos los cambiar y corremos el script para ejecutar las pruebas:

npm test

Y deberías ver que el test pasa

Hasta luego 🖖