Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 7H : 19M : 37S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Preparación del entorno con Jest

3/16

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

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__

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

  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

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

un comando mas corto puede ser

npm i jest -D

o si es de produccion

npm i jest

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

  "scripts": {
    "test": "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

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.

npm install -D jest

npm install jest --save-dev

Abreviado:
npm i -D jest

para mas rapido usar npm i -y

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

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

Captura de pantalla de 2020-10-09 20-12-02.png

jajaja yo tambien uso clear cada linea de codigo.

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

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 ❤️

  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?

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

Se agrega el script para correr 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

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__

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

  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

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

un comando mas corto puede ser

npm i jest -D

o si es de produccion

npm i jest

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

  "scripts": {
    "test": "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

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.

npm install -D jest

npm install jest --save-dev

Abreviado:
npm i -D jest

para mas rapido usar npm i -y

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

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

Captura de pantalla de 2020-10-09 20-12-02.png

jajaja yo tambien uso clear cada linea de codigo.

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

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 ❤️

  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?

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

Se agrega el script para correr Jest