Preparación del entorno con Jest

Preparación del entorno con Jest

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.

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

npm i -D @types/jest

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 😃

mkdir jsbase
cd jsbase
git init
npm init

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.

1. Según lo que había aprendido en el curso de Testing con Jest 2019 el test va dentro de describe (Para agrupar por bloques, probablemente lo veamos más adelante)

describe('Pruebas iniciales: Strings', () => {
    test('Debe contener un texto ', () => {
        expect(text).toMatch(/Hola/);
    });
});

1. Para evitar esos errores o ser más rápidos escribiendo las pruebas les recomiendo este plugin de VSC:
   https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets

2. Si quieren que VSC ejecute las pruebas al instante de guardar pueden usar este plugin:
   https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

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

Instale esta extension y solo visual ya me indicaba que el primer test fallaba 😄

Name: Jest
Id: orta.vscode-jest
Description: Use Facebook’s Jest With Pleasure.
Version: 3.2.0
Publisher: Orta
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

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

Abreviado:
npm i -D jest

para mas rapido usar npm i -y

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__

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.

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

$ yarn add --dev jest

un comando mas corto puede ser

npm i jest -D

o si es de produccion

npm i jest

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

regresando para repasar conocimientos, no recordaba lo bueno que es este curso ❤️

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

npm install jest --save-dev

npm install -D jest

Para aquellos que deseen trabajar con yarn estos son los pasos:

mkdir jsbase
cd jsbase
git init
yarn init
// las preguntas son similares a las de npm
yarn add jest --dev

Jest getting started
Yarn usage

Saludos

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

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

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

Para que los iconos de nuestro proyecto sean tan geniales como los del instructor encontré la extensión en VScode llamada vscode-icons.

Me encantó el cambio.

Sigamos aprendiendo de los mejores!

La funcion text recibe dos parametros: Un msg informativo y una funcion anonima que va a ejecutar la prueba

expect recibe una variable entrada a evaluar y luego realiza un mach para comprobar dicha variable.

Para limpiar la consola mas facil es:
Ctrl + L ó Command + L

1. Es un string que describe lo que va a pasar. Éste título debe ser muy descriptivo
2. Una función anónima donde va a venir lo que vamos a probar.
   Dentro de la función anónima se tiene el valor spec: ¿QUÉ ES LO QUE ESTOY RECIBIENDO Y CON QUÉ LO VOY A COMPARAR?

Se agrega el script para correr Jest

Muy bueno este tipo de tests para las aplicaciones, no estaba en mi cabeza hacerlos pero veo que a la larga ahorra mucho trabajo

jajaja yo tambien uso clear cada linea de codigo.

Cuando crean una aplicacion con create-react-app, Jest ya viene instalado por defecto y en la parte de scripts del archivo package.json aparece asi:

"test": "react-scripts test"

y para escribir el codigo para hacer el test esta en la carpeta src y el archivo se llama App.test.js

creo que la descripción correcta debería ser así

const text = 'hola mundo'

test('Debe contener un texto con la palabra mundo incluida', ()=> {
    expect(text).toMatch(/mundo/)
})

FIgurense que a mi, a la primera me corrio la prueba XD, pero la verdad estuvo bueno que a Oscar le saliera el error, porque asi podemos visualizar que errores pueden salir, si excribimos mal alguna funcion o algun texto, o si nos hace falta una coma. aca les comparto mi evidencia de que si funciono; y tambien, aunque mi ingles no esta tan oxidado, si entendi que dijo “toMatch” y lo escribi bien.

Los memes de testing, cobran sentido… :’)

const text = 'Hello World';

test('Global variable', () => {
  expect(text).toMatch('Hello World');
});

Casualmente en la version 27 de jest, el texto “/Mundo/” con esos slashes no los detecta con toMatch() por si les sucede solo es quitarlos

const text = "Hola Mundo"


test('Debe contener un texto', () => {
  expect(text).toMatch("Mundo");
});

Oh que genial, acabo de escribir mi primer test 😮

Instalación de Jest y configuración

npm install -D jest

Luego agregar un script para correrlo en consola de la siguiente manera:

"test": "jest"

Los tests se deben realizar en una carpeta llamada **__test__**, la cual va a contener archivos que se llaman ←- NOMBRE_ARCHIVO.test.js —>