8 cosas que hacen de Jest el mejor Framework de prueba de React

Spanish (Español) translation by Steven (you can also view the original English article)

Visión general

Jest es una librería abierta para pruebas en JavaScript desarrollada por Facebook. Su eslogan es "Pruebas de JavaScript deliciosas". Si bien Jest se puede usar para probar cualquier librería de JavaScript, brilla cuando se trata de React y React Native.

Esto no es una sorpresa ya que React y Jest provienen de Facebook, y es uno de los principales usuarios de ambos. En este tutorial, te mostraré ocho aspectos diferentes de Jest que lo hacen una delicia para probar las aplicaciones de React.

1. Jest es una cosa fácil para configurar

Jest es bastante simple de instalar por sí solo. Puedes instalarlo directamente en un directorio vacío utilizando npm o yarn. Prefiero yarn. Mira 6 cosas que hacen de Yarn el mejor administrador de paquetes de JavaScript para comprender por qué. Es tan simple como:

yarn add --dev jest

Si prefieres npm, escribe:

npm install --save-dev jest

Antes de que podamos hacer pruebas, vamos a escribir un poco de código para probarlo. Aquí está palindrome.js:

function isPalindrome(s) {
  const count = s.length - 1
  if count < 2 {
      return true
  }
  
  for (i = 0; i < (count + 1) / 2; ++i) {
    if (s[i] !== s[count - i])
      return false
  }
  return true
}

module.exports = isPalindrome

Aquí hay una simulación de una prueba en un archivo llamado palindrome.test.js:

const isPalindrome = require('./palindrome')

test('it detects palindromes', () => {
  expect(isPalindrome('palindrome')).toBe(false)
  expect(isPalindrome('')).toBe(true)
  expect(isPalindrome('a')).toBe(true)
  expect(isPalindrome('gg')).toBe(true)
  expect(isPalindrome('pop')).toBe(true)
  expect(isPalindrome('1212')).toBe(false)
})

Para ejecutar las pruebas, agrega esto a package.json:

1	"scripts": {
2	"test": "jest"
3	}

Ahora puedes ejecutar las pruebas con yarn test o npm test:

> yarn test
yarn run v1.1.0
warning package.json: No license field
$ jest
 PASS  ./palindrome.test.js
  ✓ it detects palindromes (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.667s
Ran all test suites.
✨  Done in 3.15s.

Esto es bastante simple. Pero si usas react-create-app para crear tu proyecto React, ni siquiera tienes que hacerlo. El paquete jest viene incluido, y puedes comenzar a escribir pruebas de inmediato.

2. Jest es tan rápido como un rayo

Jest es rápido. Muy rapido. Cuando tus pruebas están vinculadas a la CPU, puedes ahorrar mucho tiempo de sus ejecuciones de prueba. Airbnb cambió de Mocha a Jest, y su tiempo de ejecución de prueba total se redujo de más de 12 minutos a solo 4.5 minutos en una máquina CI de servicio pesado con 32 núcleos. Las pruebas locales solían tomar 45 minutos, que se redujeron a 14,5 minutos.

¿Qué hace que Jest sea tan rápido? Es una combinación de varios factores:

Paralelización: esto es bastante obvio, y otros frameworks de pruebas también lo usan.
Ejecuta primero las pruebas más lentas: esto garantiza que todos los núcleos se utilicen al máximo.
Almacenamiento en caché de transformaciones de babel: reduce las transformaciones de babel intensivas en CPU.

3. Jest es una ventanilla única

Jest viene con matizadores incorporados, espías y su propia librería extensa de simulaciones. Solía estar basado en Jasmine, por lo que heredó toda la bondad de Jasmine. Pero en versiones más recientes, Jest se apartó de Jasmine, y mantuvo la misma funcionalidad y agregó su propio sabor y mejoras.

Al compararlo con una solución de prueba a medida, basada en Mocha, está claro que la facilidad de uso es una de las principales preocupaciones del diseño de Jest.

4. Jest tiene simulacros impresionantes

Las simulaciones son una parte increíblemente importante de las pruebas unitarias. Esto es especialmente importante si te interesan las pruebas rápidas (¿y a quién no?).

La simulación permite reemplazar dependencias irrelevantes que pueden ser lentas e incluso controlar el tiempo. Jest te permite controlar completamente tus dependencias y tu tiempo maestro.

Funciones Simuladas Simples

Las dependencias de simulación son una tradición en las pruebas unitarias desde hace mucho tiempo. Si tu código lee un archivo, escribe en un archivo, llama a algún servicio remoto o accede a una base de datos, puede ser lento y puede ser complicado configurarlo y limpiarlo después de la prueba. Cuando se ejecuta en paralelo, es posible que ni siquiera sea posible controlarlo adecuadamente.

En estos casos, es mejor reemplazar la dependencia real con una función simulada que no hace más que registrar el dato que se llamó, así puedes verificar el flujo de trabajo. La función simulada jest.fn() te permite proporcionar valores de retorno simulados (para múltiples llamadas consecutivas), y registra cuántas veces se llamó y cuáles fueron los parámetros en cada llamada.

Simulación de módulos manualmente

A veces es posible que debas reemplazar un módulo completo con tus datos en lugar de un par de funciones. Jest te permite hacerlo colocando tu propio módulo con el mismo nombre en un subdirectorio __mocks__.

Siempre que tu código esté utilizando el módulo de destino, accederá a tu simulación en lugar de al módulo real. Incluso puedes elegir selectivamente para algunas pruebas usar el módulo original llamando a jest.Unmock('moduleName').

Temporizando los simulacros

El tiempo es la ruina de las pruebas unitarias. ¿Qué sucede si deseas probar el código que se agota después de un minuto? ¿El código que se dispara cada 30 segundos? ¿El código especial que ejecuta un algoritmo de reconciliación a fin de mes?

Esos son difíciles de probar. Puedes sucumbir a los requisitos de tiempo del código original (y luego tus pruebas serán muy lentas), o puedes manipular el tiempo, lo que es mucho más útil. Jest te permite controlar las siguientes funciones relacionadas con el temporizador:

setTimeout()
setInterval()
clearTimeout()
clearInterval()

Simulacros de clase ES6

Jest es totalmente compatible con las clases de ES6 y ofrece varias formas de simularlas ellas:

Simulacro automático: te permite espiar las llamadas al método constructor y todos los métodos, pero siempre devuelve indefinido.
Simulacro manual: implementa tu propio simulacro en el subdirectorio __mocks__.
Simula la clase 'factory' con una función de orden superior.
Simulacro selectivo usando mockImplementation() o mockImplementationOnce().

5. Jest admite TypeScript

TypeScript es un superconjunto tipificado de JavaScript que se compila en JavaScript simple. Jest admite TypeScript a través del paquete ts-jest. Se describe a sí mismo como un preprocesador TypeScript con soporte de mapa fuente para Jest y tiene una comunidad muy activa.

6. Jest te cubre

Jest tiene informes de cobertura incorporados. Tus pruebas son tan buenas como su cobertura. Si pruebas solo el 80% de tu código, los errores en el otro 20% se descubrirán solo en producción.

A veces, tiene sentido desde una perspectiva comercial omitir las pruebas para algunas partes del sistema. Por ejemplo, las herramientas internas que usan y cambian con frecuencia tus propios ingenieros expertos pueden no necesitar el mismo nivel de pruebas rigurosas que tu código de producción. Pero, en cualquier caso, esta debería ser una decisión consciente, y deberías poder ver exactamente la cobertura de las pruebas en diferentes partes de tu sistema.

Aquí se explica cómo generar un informe de cobertura para el ejemplo simple de palíndromo:

1	> yarn test --coverage
2	yarn run v1.1.0
3	warning package.json: No license field
4	$ jest "--coverage"
5	PASS ./palindrome.test.js
6	✓ it detects palindromes (4ms)
7
8	-------------- \|----------\|----------\|----------\|----------\|
9	File \| % Stmts \| % Branch \| % Funcs \| % Lines \|
10	-------------- \|----------\|----------\|----------\|----------\|
11	All files \| 100 \| 100 \| 100 \| 100 \|
12	palindrome.js \| 100 \| 100 \| 100 \| 100 \|
13	-------------- \|----------\|----------\|----------\|----------\|
14	Test Suites: 1 passed, 1 total
15	Tests: 1 passed, 1 total
16	Snapshots: 0 total
17	Time: 1.712s
18	Ran all test suites.
19	✨ Done in 3.41s.

7. Jest hace instantáneas

Las pruebas de instantáneas son geniales. Te permite capturar una cadena que representa tu componente renderizado y almacenarla en un archivo. Luego puedes compararlo más tarde para asegurarte de que la IU no haya cambiado. Si bien es ideal para las aplicaciones React y React Native, puedes usar instantáneas para comparar valores serializados de otros frameworks. Si cambias tu interfaz de usuario, entonces necesitas actualizar tus archivos de instantáneas para reflejarlo, por supuesto.

8. Jest hace pruebas Delta con reloj

Jest puede ejecutarse en modo "vigilancia", donde ejecuta las pruebas automáticamente cada vez que cambias el código. Lo ejecutas con el argumento de la línea de comandos --watchAll, y monitoreará tu aplicación en busca de cambios. Ejecuté Jest en modo "vigilancia" e introduje un error a propósito para palindrome.js, y aquí está el resultado:

 FAIL  ./palindrome.test.js
  ✕ it detects palindromes (11ms)

  ● it detects palindromes

    expect(received).toBe(expected) // Object.is equality

    Expected value to be:
      true
    Received:
      false

       6 |   expect(isPalindrome('a')).toBe(true)
       7 |   expect(isPalindrome('gg')).toBe(true)
    >  8 |   expect(isPalindrome('pop')).toBe(true)
       9 |   expect(isPalindrome('1212')).toBe(false)
      10 | })
      11 |

      at Object.<anonymous>.test (palindrome.test.js:8:30)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.598s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

Conclusión

Jest es un framework de prueba rápido que es fácil de configurar. Es desarrollado y utilizado activamente por Facebook para probar todas sus aplicaciones de React, así como por muchos otros desarrolladores y empresas.

Tiene todo lo que necesitas en un paquete conveniente, es compatible con TypeScript e IMO es la mejor opción para las pruebas de aplicaciones React y React Native. También es muy importante para migrar desde otras soluciones de prueba.

Recuerda, React ha crecido en popularidad. De hecho, tenemos una serie de artículos en Envato Market que están disponibles para su compra, revisión, implementación, etc. Si estás buscando recursos adicionales en torno a React, no dudes en consultarlos.