Creando nuestra primera prueba unitaria

Clase 6 de 25 • Curso de JavaScript Testing con Jest 2019

Resumen

Jest es una librería open source promocionada por Facebook que nos permite crear pruebas unitarias con javascript en nuestros proyectos.

En esta clase, crearemos nuestra primera prueba unitaria. Para ello. Crearemos unas funciones en JavaScript para luego probarlas usando Jest.

En la consola, dentro de la ruta de nuestro proyecto, corremos jest para ejecutar las pruebas, También podemos crear un script en nuestro package.json.

Test es el nombre de la carpeta que Jest identifica como el lugar en el que se ubican las pruebas.

Recuerda:
Test es el nombre de la carpeta que Jest identifica como el lugar en el que se ubican las pruebas.
Exportar (export) las funciones para luego probarlas.

RETO: Construye las pruebas para la resta y la división.

Daniel Vaca

student•

Los paquetes npm que utiliza el profe ya están desactualizados. Estamos Mayo 2019 y la manera correcta de configurar todo es:

Instalar las dependencias:

npm install --save-dev Jest
npm install --save-dev babel-jest @babel/core @babel/preset-env

En el archivo .babelrc colocar:

{
  "presets": ["@babel/preset-env"]
}

Las versiones de las dependencias en el archivo Package.json quedarían así:

"devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0"
  }

En el archivo Package.json agregar el comando "test"

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

Ejecutar el siguiente comando para ejecutar las pruebas de jest:

npm test

Mas información: https://jestjs.io/docs/en/getting-started

Wilson Alejandro Gonzalez Gaitan

student•

Gracias funciono

Mario Alejandro Crespo Reyes

student•

25 de Junio de 2019

Funcionando

Facundo Petre

student•

En caso de no tener una instalación global de Jest, pueden ejecutar las pruebas agregando la tarea en la key: “scripts” de su package.json
Ejemplo:

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

Saludos!

Oney Ortiz Roman

student•

Gracias!!, era algo que no sabia 😃

Pablo Daniel Jacobo Sanchez

student•

En este caso solo bastaría ejecutar npm test y listo

Fabián Veliz

student•

Buenas!
Si les sale un error relacionado con el preset es2015, corran la siguiente línea en consola:

// Con npm
npm install babel-preset-env --save-dev
// Con yarn
yarn add babel-preset-env -D

Y actualicen el .babelrc con esto:

{
  "presets": ["env"]
}

Se recomienda utilizar esta nueva versión en vez de la otra.
Les dejo el link con toda la info: Docs.

Orlando Manuel Mendoza Vargas

student•

Brother disculpa que te corrija pero es : @babel/preset-env no babel-preset-env 😅👍

Nicolas Restrepo

student•

Para los que no les funciona babel: El preset de "es2015" es antiguo, ahora se usa el "@babel/preset-env" que lo que hace es usar las últimas versiones de javascript sin tener que especificar alguna. Lo debemos instalar con

npm install --save-dev @babel/preset-env

Y lo incluimos a nuestro archivo .babelrc así:

{
	"presets": ["@babel/preset-env"]
}

Espero que les funcione

Brian Domínguez Vázquez

student•

Para los que no pudieron correr el test así;

$: jest

Es por que requieren correrlo de la siguiente forma;

./node_modules/.bin/jest

O bien modificando test en el package.json

"scripts": {
    "test": "./node_modules/.bin/jest"
  }

Y ya solo lo correrian así;

npm run test

De igual forma si les sale el siguiente error

Cannot find module 'babel-preset-es2015'

Se puede corregir modificando el .babelrc

{
    "presets": ["@babel/preset-env"]
}

Jhon Manuel Angulo Moncada

student•

documentación de Jest en español: https://jestjs.io/docs/es-ES/getting-started

si usas las ultimas versiones de las librerias debes instalar: npm i -D -E babel-jest @babel/core @babel/preset-env

y configurar en el archivo de babel el presets es: @babel/preset-env reto cumplido:

import { sumar, restar, multiplicar, dividir } from '../maths'

describe('Calculos matematicos', () => {
    
    test('Prueba de sumas', () => {
        expect(sumar(1, 1)).toBe(2)
    })

    test('Prueba de restas', () => {
        expect(restar(100, 99)).toBe(1)
    })

    test('Prueba de multiplicaciones', () => {
        expect(multiplicar(2, 2)).toBe(4)
    })

    test('Prueba de diviciones', () => {
        expect(dividir(10, 2)).toBe(5)
    })


})

 PASS  __test__/maths.test.js
  Calculos matematicos
    √ Prueba de sumas (3ms)
    √ Prueba de restas (1ms)
    √ Prueba de multiplicaciones
    √ Prueba de diviciones

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

David Brito

student•

A enero de 2019, los pasos a seguir para que el primer test corra sin problema es (a través de npm):

Instalar las dependencias jest, babel-jest, babel-preset-env y regenerator-runtime
Añadir a package.json:

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

Crear un archivo .babelrc con el contenido:

{
  "presets": ["env"]
}

Correr el comando jest --init

Esto era para configurar jest en el proyecto. Ahora el comando jest ya debería funcionar.

Todo esto lo conseguí siguiendo la documentación:

Andres Gazui

student•

Para los que están viendo el curso actualmente, si quieren utilizar el comando de jest de forma local en caliente sin preparar un comando dentro del package.json pueden utilizar el comando de npx jest :D

Olcontenidos

student•

Gracias !!! Ya estaba por romper mi notebook :)

Mario Sergio Ramos Santos

student•

Hola, tengo el siguiente error " TypeError: Cannot read property ‘bindings’ of null", por favor ayuda con esto, me he quedado estancado alli

Mario Sergio Ramos Santos

student•

FAIL test/maths.test.js
● Test suite failed to run

TypeError: Cannot read property 'bindings' of null

  at Scope.moveBindingTo (node_modules/@babel/traverse/lib/scope/index.js:867:13)
  at convertBlockScopedToVar (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
  at PluginPass.VariableDeclaration (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
  at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
  at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
  at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
  at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
  at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)
  at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:90:19)
  at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:146:19)

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

Juan Pareles

student•

Tuve el mismo problema, el error es por una incompatibilidad de versiones en algunos paquetes. Mi solucion fue substituir lo que tenia en mi bloque de devDependencies en package.json por lo exactamente igual al del video:

"devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^23.6.0"
  }

Si cambiaste el preset en .babelrc tambien usa el del video:

{
“presets”: [“es2015”]
}

borre la capeta node_modules por si acaso: rm -r node_modules y luego npm install de nuevo. Ahora deberia funcionar todo bien corriendo npm run test

David Vargas

student•

Hola, disculpen tengo un problema con el intellisense en VS Code. Actualmente tengo un proyecto en Node.js al cual le instale Jest via npm install jest --save, luego cree la respectiva carpeta test y dentro cree un test prueba llamado CRUDTest.test.js. El problema que tengo es que dentro de este archivo no tengo ninguna de las sugerencias que tiene Oscar en su visual studio code, he intentado de todo pero no logro activarlas. Si escribo describe o test obtengo una sugerencia distinta a la que le sale a Oscar:

Y en el caso de escribir expect o algun metodo como toBe, no obtengo ninguna sugerencia:

Aqui dos capturas con la estructura de mi proyecto:

Cosas que he intentado:

Instalar diferentes tipos de extensiones en visual studio code entre ellas:
- Jest by Orta
- Jest Snippets by andys8
Instalar Jest de forma global y correr jest init
Buscar en google, stackoverflow, hilos de github, lo mas cercano a mi problema es esto: https://github.com/jest-community/vscode-jest/issues/269

En cuanto a mi OS, es Ubuntu 18

De casualidad alguien a experimentado lo mismo?

Les agradeceria mucho su colaboracion.

David Vargas

student•

Hola chicos despues de horas buscando la solucion, acabe de descubrir que es relacionado con la ultima version de Jest 24.7.1 la cual tiene el bug arriba mencionado, ya que al usar exactamente la misma que Oscar ^23.0.6 en el package.json, el intellisense funciona sin inconvenientes. En resumen, solo es reemplazar en el package.json la version de Jest por una anterior, en mi caso la misma que usa Oscar me funciono.

David Vargas

student•

Les cuento mas detalles de lo que encontre, revisando la pagina de tags para jest en github, me puse en la tarea de probar hasta que version functiona el intellisense y parece ser que apartir de la version 24.0.0: https://github.com/facebook/jest/tags?after=v24.0.0-alpha.6 el intellisense en VS Code falla. Ya que la ultima version con el intellisense funcional es 23.6.0. Ahi les dejo el dato :P

PD: Disculpen la ausencia de tildes, es que mi teclado no tiene tildes ni enies

Cesar Guillermo Amadori

student•

Cuando quise correr jest me dio error:
No se ha encontrado la orden <<jest>>, quizás quiso decir: …
así que probé escribiendo yarn jest y corrió correctamente la prueba

Ludwring Liccien

student•

Por que no tiene jst instalado global con npm i -g jest o yarn global add jest

Washington Izquierdo Guerrero

student•

Me queda la duda, porque creaste primero el código y después los unit test??.
De esa manera no estas siguiendo el principio de TDD, escribe la prueba, haz fallar la prueba, refactor, y finalmente hacer pasar la prueba.

En donde el código se escribe después de escribir las pruebas.

Saludos.

Eduardo Hidalgo Díaz Rugama

student•

No necesariamente. Ten cuidado cuando hables de buenas prácticas y de técnicas si no conoces al 100 el transfondo.

Hacer unit testing antes de desarrollar el feature es lo recomendado, porque obliga psicológicamente al programador a solamente tirar código en lo necesario para que el feature funcione. Te limita, y hace que inconscientemente hagas menos código, más limpio, y más prolijo.

Claro, el problema es que esta técnica es que el programador debe ser muy experto, tener excesiva experiencia, y tener una clara visión de todas las capas requeridas para el feature, de lo contrario es altamente probable que tenga que hacer mínimo una refactorización, lo que se traduce en código extra y tiempo.

Si te sientes hábil, y lo eres, adelante. De lo contrario, sea antes o despues el unit testing, es correcto. Nadie te va a cortar las manos por hacerlo después.

David Antonio Ordóñez Cornejo

student•

Hola, yo no soy experto, pero practicar TDD me ha sido de mucha utilidad. Yo lo recomiendo ampliamente, entiendes y escribes mejor codigo.

Giorgio Ventura

student•

Si desean que Jest se instale de forma global y puedan realizar el mismo paso que hizo el profesor en el minuto 8:21 pueden usar el siguiente comando: npm install jest --global

Fuente: https://jestjs.io/docs/en/getting-started.html

Pablo Daniel Jacobo Sanchez

student•

Mas info:
Otra Opción:

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

y lo ejecutan con npm test :D

Jose Enrique Marquez

student•

Mis test, agregue un not en el test add para realizar prueba exitosa al fallar.

import {add, multi, substrap, divide} from './../maths';

describe('math calcule', () => {
  test('add test', () => {
    expect(add(1, 1)).not.toBe(3);
  })
  test('multi test', () => {
    expect(multi(2,2)).toBe(4);
  })
  test('substrat test', () => {
    expect(substrap(2,2)).toBe(0);
  })
  test('multi test', () => {
    expect(divide(2,2)).toBe(1);
  })
})

Daniela Gonzales

student•

también se debe colocar valores a fallar? o solo los correctios?

Adham Gatriff

student•

daniela no es que se deban colocar valores al fallar, lo que jomarquez demuestra es que se puede hacer que falle al negar el toBe con .not

jenny portillo

student•

Me estaba dando error con el comando jest, entonces despues de leer un poco descrubri que debo ejecutarlo de la siguiente manera -> ./node_modules/.bin/jest
de esa manera si me ejecuto sin problemas. Por si a alguien mas le sucede.

Ludwring Liccien

student•

Por que no tiene jst instalado global con npm i -g jest o yarn global add jest

Jorge Méndez Ortega

student•

Actualmente con el cambio de las versiones de las librerias se presenta el siguiente problema

TypeError: Cannot read property 'bindings' of null

Para poder corregir este problemna es necesario instalar la dependnecia

npm i -D @babel/preset-env

dicha dependnecias sustituira a

 "babel-preset-es2015": "^6.24.1",

hasta este punto ya no es necesario realizar ninguna configuracion adicional con esto podrias trabajar correctamente.

en el .babelrc queda de la siguiente forma

{
    "presets":
           [
               "@babel/preset-env"
           ]
}

Edward Fernandez

student•

Hola a todos.

Listo el reto:

Pamela Cinthya Torres Gutiérrez

student•

me costo un poco de trabajo pero gracias a las aportaciones de unos compañero pude solucionarlo.

todo es cuestión de las versiones

Danelia Sanchez Sanchez

student•

Estas clases que son publicadas en Youtube no se pueden ver por la app.

import { sumar, restar, multiplicar, dividir } from '../maths'

describe('Calculos matematicos', () => {
    
    test('Prueba de sumas', () => {
        expect(sumar(1, 1)).toBe(2)
    })

    test('Prueba de restas', () => {
        expect(restar(100, 99)).toBe(1)
    })

    test('Prueba de multiplicaciones', () => {
        expect(multiplicar(2, 2)).toBe(4)
    })

    test('Prueba de diviciones', () => {
        expect(dividir(10, 2)).toBe(5)
    })


})

 PASS  __test__/maths.test.js
  Calculos matematicos
    √ Prueba de sumas (3ms)
    √ Prueba de restas (1ms)
    √ Prueba de multiplicaciones
    √ Prueba de diviciones

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

TypeError: Cannot read property 'bindings' of null

  at Scope.moveBindingTo (node_modules/@babel/traverse/lib/scope/index.js:867:13)
  at convertBlockScopedToVar (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
  at PluginPass.VariableDeclaration (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
  at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
  at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
  at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
  at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
  at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)
  at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:90:19)
  at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:146:19)

import {add, multi, substrap, divide} from './../maths';

describe('math calcule', () => {
  test('add test', () => {
    expect(add(1, 1)).not.toBe(3);
  })
  test('multi test', () => {
    expect(multi(2,2)).toBe(4);
  })
  test('substrat test', () => {
    expect(substrap(2,2)).toBe(0);
  })
  test('multi test', () => {
    expect(divide(2,2)).toBe(1);
  })
})

Creando nuestra primera prueba unitaria

Introducción al curso

¿Dónde aprender testing con JavaScript?

Qué son pruebas Unitarias

Herramientas para pruebas en Javascript

Configuración

¿Qué es Jest?

Instalación y configuración

Creando nuestra primera prueba unitaria

Matchers

Common Matchers / Comparadores Comunes

Numbers

Truthness / Verdadero

Arrays

Coverage

Strings

Monitoreo

Setup de pruebas

Testing Asynchronous Code

Callbacks

Promesas

Reject y resolve

Async/Await

Aplicaciones de testing para Async/Await

Snapshot Testing

Snapshot Testing

Excepciones Snapshot

Implementando Jest en diferentes Frameworks

Preparar proyecto para trabajar con React JS

Preparar proyecto para trabajar con Vue JS

Preparar proyecto para trabajar con Express JS

Beneficios de las Pruebas Unitarias