Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Preparaci贸n del entorno con Jest

3/16
Recursos

Aportes 38

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渢est鈥, 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 鈥楳undo鈥. 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 鈥榥pm 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鈥檚 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

{ 鈥渢ypeAcquisition鈥: { 鈥渋nclude鈥: [ 鈥渏est鈥 ] } }

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 鈥測arn鈥 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 鈥渓icense鈥: 鈥淚SC鈥 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 鈥渢oMatch鈥 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 鈥>