Preparación del entorno con Jest

Clase 3 de 16 • Curso de Unit Testing con Jest en React

Clase anteriorSiguiente clase

Alan David R.L.

student•

Escribimos en la terminal el siguiente comando:

npm install -D jest

-D es lo mismo que --save-dev.

Ambos flags guardan la dependencia como una de desarrollo.

Trabajando con los basicos de Jest

Vamos a estar trabajando con la función "test", esta recibe dos parametros:

Un string que describe lo que va a pasar.
Función anonima en la cual viene lo que se va a probar.

La función expect

Contiene dos parametros:

Valor de entrada.
Con lo que el primer parametro va a ser comparado.

const text = "I´m Ironman";

test("It should has the word Ironman", () => {
  expect(text).toMatch(/Ironman/);
});

Código listo para hacer test

Ahora para hacer test de nuestro código tenemos que correr el comando test, para eso se tiene que armar en nuestro package.json

"scripts": {
"test": "jest"
},

Output

PASS src/**test**/global.test.js
✓ It should has the word Ironman (4ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.663s
Ran all test suites.

Miguel Angel Escurra

student•

Excelent!!!

Carlos Eduardo Diaz Polanco

student•

Muy bien!!!

Edwin García

student•

En mi editor muestra unos errores al no definir las funciones test y expect Para solucionarlo instalé @types/jest

npm i -D @types/jest

Bernardo Aguayo Ortega

student•

gracias bro!

Jair Israel Avilés Eusebio

student•

Una solucion tal vez no tan limpia es importar en tus archivos de pruebas los metodos desde el paquete de jest.

import {describe, expect, test} from '@jest/globals'

Miguel Prada

student•

Un tip que encontré! Jest contiene una funcionalidad para observar cambios en los archivos y ejecutar los tests automaticamente. Al comando jest se le puede agregar el flag --watch para observar los cambios. Entonces en el package.json si agregamos:

  "scripts": {
    "test": "jest",
    "test-watch": "jest --watch"
  },

Podemos correr npm run test-watch y la terminal estará atenta a cambios en los archivos para ejecutar de nuevo las pruebas :)

Andrés Felipe Eslava Zuluaga

student•

Genial!

Humberto Asca

student•

Excelente, solo ejecuto una sola vez npm run test-watch y después cada vez que actualizo/grabo un archivo de test, el test se ejecuta en forma automática ahorrando tiempo para no ejecutar npm run test cada vez.

Tiene algo similar a nodemon que nos ahorra tiempo.

Luis Fernando Farji

student•

mkdir jsbase
cd jsbase
git init
npm init

Miguel Angel Escurra

student•

Muchas gracias!

John Parra

student•

Muy utiles los comandos para iniciar de 0 las pruebas unitarias, importante tener en cuenta la creación de cada archivo global.test.js asi como la creación de la carpeta donde va src/__test__

Nelo Puchades Bresó

student•

Creo que el texto que describe el test está mal redactado, ya que lo que comprueba no es que deba contener un texto, si no que el texto que se le pasa debe contener la palabra 'Mundo'. Es distinto. Cuidado no se confundan.

Jhon Fernando Ríos Galíndez

student•

El texto se da como referencia para entender en palabras lo que se quiere con el test, pero lo que realmente se testea es expect vs toMatch. Basicamente te refieres a eso.

Rafael Soriano Ramírez

student•

Por primera vez en mi vida ejecutando un 'npm test', se siente raro

Cristian Blandón

student•

Óscar cambia de tema tanto en VSCode como en la terminal en cada curso :joy:

July Andrea Suarez Suarez

student•

Buenos dias tambien se podria hacer con typeScript?

July Andrea Suarez Suarez

student•

Muchas gracias voy a probar con la informacion que me pasaste

Cristian Blandón

student•

¡Por supuesto!

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

student•

Es un estandar crear la siguiente carpeta, pues como desarrolladores la utilizamos para poner nuestras pruebas e identificarla más rápido y saber que esa no es una carpeta random, sino que es una carpeta dónde van a vivir nuestras pruebas:

__test__

Andrés Felipe Eslava Zuluaga

student•

No sabía ésto! Qué buen apunte

Santiago Marulanda Molina

student•

Abreviado: npm i -D jest

Carlos Jose Flores Henriquez

student•

A los que les aparece "license": "ISC" a la hora de configurar el package.json. DEJENLO ASÍ.

Diego Monroy

student•

Tengo este error simplemente al correr npm test

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

Alguna ayuda? no hice nada más que los pasos del video jeje

Jair Israel Avilés Eusebio

student•

El error es claro SyntaxError. Verifica que no tengas un typo en la definicion de tu prueba.

Carlos Rosado

student•

un comando mas corto puede ser

npm i jest -D

o si es de produccion

npm i jest

Juan David González Rodríguez

student•

Aunque no seria bueno instalarlo como producción , ya que los test solo lo usamos en desarrollo , Y seria innecesario ponerlo en producción :D

Jorge De Jesus Tejeda Bello

student•

Para agregar intellisense de jest, en la raiz del proyecto creamos un archivo llamado jsconfig.json y dentro agregamos el siguiente objeto

{ “typeAcquisition”: { “include”: [ “jest“ ] } }

luego instalamos la libreria

npm i @types/jest --save-dev

por ultimo volver a cargar el IDE que estes utilizando, de ser visual VSCO presiona CMD+SHIFT+P (para Mac) CRTL+SHIFT+P (para window)

y escribimos reload window.

Jean Nuñez

student•

npm install jest --save-dev

Ruth Lucy Campos Huamantica

student•

Para correr nuestro test, tener en cuenta esta línea en el archivo package.json:

  "scripts": {
    "test": "jest"
  },

Beicker Jesus Zambrano Escalona

student•

Wow pero qué maravilla de profesor jaja Me está encantando este curso. Se ve super fácil el use de Jest (hasta ahora jeje)

Bernardo Aguayo Ortega

student•

regresando para repasar conocimientos, no recordaba lo bueno que es este curso <3

Cristhian Medina

student•

Si alguno utiliza "yarn" como instalador de paquetes, el comando para instalar jest es:

$ yarn add --dev jest

Mariano Villarreal

student•

npm install -D jest