Qué es Jest y cómo funciona con React

En este artículo aprenderemos qué es Jest, para que sirve y como podemos integrarlo con React para correr nuestras pruebas con herramientas como Vite, Create React App o NextJs.

¿Qué es Jest?

Jest es un framework de tipo testing para Javascript, que permite escribir, ejecutar y evaluar nuestras pruebas de una forma más fácil y rápida.

NOTA: Un frameworks es un conjunto de herramientas, buenas prácticas y técnicas que en conjunto resuelven una problemática específica. En nuestro caso, esa problemática son las pruebas. Por eso decimos que es un framework de tipo testing.

¿Cómo escribir mis pruebas en Jest?

Para escribir las pruebas, hay que crear un archivo de pruebas con la extensión “.test" o “.spec”. Dentro de él, usamos la palabra reservada “it” o “test” para definir cada una de nuestras pruebas.

Escribir prueba usando “it”

File: calculadora.test.js
    1: it('sumar correctamente', () => {
    2: });

Escribir prueba usando “test”

File: calculadora.spec.js
    1: test(‘sumar correctamente', () => {
    2: });

NOTA: Un archivo de pruebas, contiene el código de las pruebas para evaluar nuestro código productivo.

¿Cómo evaluar mis pruebas?

La evaluación de las pruebas se clasifica en dos niveles: interno y externo. El nivel interno se refiere al uso de aserciones. De forma muy general, es una condición de si algo se cumple. Por ejemplo, si sumamos 5 más 5 es igual a 10.

File: calculadora.test.js
    1: it('sumar correctamente', () => {
    2:   expect(10).toEqual(5 + 5); // evaluación
    3: });

NOTA: Existen diferentes tipos de aserciones para evaluar casi cualquier escenarios. Por ejemplo, si queremos validar si un objeto contiene una estructura específica.

Por otro lado, a nivel externo, se refiere al resultado en modo reporte al ejecutar las pruebas. Este reporte contiene información de cuantas pruebas pasaron y/o fallaron, cuanto tiempo tardaron en ejecutarse, ubicación de las pruebas ejecutadas y en caso de fallar una prueba, muestra los posibles errores.

Evaluación externa de prueba exitosa

 PASS  src/capitulos/Capitulo5/calculadora.test.js
  ✓ sumar correctamente (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.555 s, estimated 1 s

Evaluación externa de prueba fallida

 FAIL  src/capitulos/Capitulo5/calculadora.test.js
  ✕ sumar correctamente (2 ms)

  ● sumar correctamente

    expect(received).toEqual(expected) // deep equality

    Expected: 8
    Received: 10

      1 | it('sumar correctamente', () => {
    > 2 |   expect(10).toEqual(3 + 5);
        |              ^
      3 | });

      at Object.toEqual (src/capitulos/Capitulo5/calculadora.test.js:2:14)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.64 s, estimated 1 s

¿Cómo ejecutar mis pruebas en Jest?

Para ejecutar las pruebas en Jest, usamos el comando “jest”. Además, tenemos varias opciones para ejecutar nuestras pruebas: ejecutar todas las pruebas dentro del proyecto, solo las pruebas dentro de un archivo de pruebas específico o una prueba en específico dentro de un archivo de pruebas específico.

Ejecutar todas las pruebas dentro del proyecto

./node_modules/jest/bin/jest.js

Ejecutar las pruebas de un archivo de pruebas en específico

./node_modules/jest/bin/jest.js calculadora.test.js

Ejecutar una prueba en particular dentro de un archivo de pruebas específico

./node_modules/jest/bin/jest.js calculadora.test.js —t “suma correctamente"

NOTA: Sin embargo, dependiendo como configuremos Jest, el comando para ejecutar las pruebas puede ser diferente. Por ejemplo, con la herramienta Create React App, el comando es “npm test”.

Usando Jest con React

Cuando creamos nuestras aplicaciones React, elegimos herramientas como Vite o NextJs, para agilizar el proceso de desarrollo. Muchas de estás herramientas, ya tienen contemplado el uso de Jest con React para ejecutar nuestras pruebas frontend.

Veamos algunas de estas herramientas y sus configuraciones.

Create React App

Es una herramienta para crear aplicaciones simple page o más conocidas como SSR.

¿Requiere configuración extra para ejecutar Jest + React?

No, todo listo para correr las pruebas desde el inicio.

npx create-react-app my-app
cd my-app
npm test

NOTA: No se recomienda usar Create React App para crear aplicaciones modernas.

NextJs

Es una herramienta para crear aplicaciones web React modernas.

¿Requiere configuración extra para ejecutar Jest + React?

Si, pero puedes instalarlo fácilmente.

npx create-next-app@latest my-app --example with-jest
cd my-app
npm run test

Vite

Es una herramienta para creaciones aplicaciones frontend modernas, permite usar las librerías frontend más populares como React, VUE.

NOTA: Vite no es compatible para integrarse directamente con Jest, para eso existe el runner test “vitest”. Sin embargo, si podemos usar Jest + Babel para correr nuestras pruebas.

¿Requiere configuración extra para ejecutar Jest + React?

Si

1. Instalar Jest, Testing Library y Babel

npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-env @babel/preset-react

2. Configurar Babel

// babel.config.cjs
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
}

3. Configurar Jest

De forma muy general, se configura para que babel pueda transformar archivos modernos de “js” en código que Node entienda. Además, configuramos la nomenclatura de los archivos de prueba para que Jest entiende que esos archivos contienen código de pruebas (.spec.js y .test.js)

// jest.config.cjs
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.js'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  testMatch: [
    '**/__tests__/**/*.test.js?(x)',
    '**/?(*.)+(spec|test).js?(x)',
  ],
}

4. Instalar jsdom

A grandes rasgos permite crear un navegador ficticio para correr nuestras pruebas en un entorno Node.

npm install --save-dev jest-environment-jsdom

Conclusión

Jest es una framework enfocado específicamente a trabajar con tus pruebas. Muchas de las herramientas para crear aplicaciones web modernas, ya están pensadas para utilizar Jest, ya sea desde el inicio o realizando algunas configuraciones extras.