Jest es una herramienta que nos ayuda a automatizar nuestras pruebas.
El entender el problema, es el 80% de la solución.
Hay que entender porque estamos usando Jest y como es que nos ayuda a resolver nuestro problema de pruebas.
Existen 4 definiciones en las pruebas que nos pueden ayudar a entender mejor esto.
Anomalía: es un comportamiento que no se espera dentro del sistema.
Defecto: Situación que se puede reproducir y se sabe que causa problemas al sistema.
Fallo: Incapacidad del sistema dentro de los márgenes conocidos.
Error: acción humana que genera desperfectos en el sistema.
Ejemplo
Muy bonitas las definiciones, pero, ¿qué saco yo de esto?
Pongamos este ejemplo:
Contamos con un despertador que todas las mañanas a las 9 AM suena su alarma, pero desde hace unos días ya no lo hace, eso es una anomalía, en caso de que hubiera llegado con una manecilla rota, seria defecto, si necesita luz para funcionar y por una tormenta se nos va la luz y ya no sirve, es fallo y por último si utilizas tu despertador para que te ayude a volver con tu ex, es un error.
Teniendo ya este panorama, Jest es una herramienta que nos ayuda a detectar anomalías o defectos, prevenir errores y minimizar los fallos de nuestro sistema.
Cuando instalamos vue test utils instalamos jest, así que ya tenemos esto listo. Ahora saltemos directo al código.
Anteriormente nos habíamos quedado con esto:
import { mount } from '@vue/test-utils' import App from '@/App.vue' const wrapper = mount(App) const vm = wrapper.vm console.log(vm.$data)
Ahora, agregaremos nuestra primera prueba con ayuda de Jest.
Para esto, vamos a crear un nuevo archivo llamado jestTest.js a la misma altura de nuestro archivo de pruebas.
Dentro de este archivo vamos a escribir las siguientes funciones:
function huevo() { return { estado: ['fresco'], color: '#000' } } function espinaca() { return { estado: 1, color: "verde" }
Y las exportamos:
module.exports = { huevo, espinaca };
Luego, las importamos en nuestro archivo de pruebas con esta línea:
import {huevo, espinaca} from "./jestTest";
Si hemos llegado hasta aquí, lo único que falta es escribir la prueba en sí.
Empezaremos con una función llamada describe() que recibe dos parámetros:
param1
Tipo: String
Descripción: el nombre de nuestro set de pruebas, ojo que es set de pruebas, más no la prueba en sí.
param2
Tipo: Function
Descripción: función que va a contener nuestras pruebas.
Se ve de esta manera:
describe('Se probará la calidad de los productos', ()=>{ //Escriba sus pruebas aquí });
Luego seguimos con la función llamada test() que recibe dos parámetros:
param1
Tipo: String
Descripción: el nombre de nuestra prueba .
param2
Tipo: Function
Descripción: función que va a contener nuestras validaciones para que pase la prueba.
Entonces quedaría algo así:
test('Calidad del huevo', () => { //escriba aquí sus validaciones }); test('Calidad de la espinaca', () => { //escriba aquí sus validaciones });
Para la parte de las pruebas, recordaremos que las pruebas unitarias, prueban piezas atómicas del código , mientras que las pruebas de integración, prueban procesos.
Por ahora solo tenemos unas piezas atómicas, no un proceso, así que sólo haremos unas pruebas unitarias.
Matchers
Jest trabaja con matchers, que son meramente funciones que nos permiten probar nuestro código de diferentes maneras.
Todos los matchers empiezan con la palabra expect así que cada vez que veas que una línea de código empieza con eso, significa que estamos accediendo a un matcher para hacer una prueba.
Hay múltiples matchers, pero para este ejemplo solo utilizaremos dos, .toBe y .toEqual
.toBe
Compara valores primitivos. Utiliza la función Object.is para hacer las validaciones, la cual es mucho más confiable que un ===.
Su sintáxis es:
expect(coso).toBe(valorEsperado)
Donde coso es lo que estamos probando.
.toEqual
Compara recursivamente los valores de las propiedades de la instancia del objeto enviado (esto se le conoce como "deep equality"). Utiliza de igual manera la función Object.is para hacer las validaciones.
Su sintáxis es:
expect(coso).toEqual(valorEsperado)
Donde coso es lo que estamos probando.
Hagamos una recapitulación de lo que hemos visto.
-
Ya sabemos que debemos tener nuestra función describe que es la que va a contener las pruebas.
-
Las validaciones para que pasen nuestras pruebas se ponen dentro de la función
test(). -
Las pruebas individuales utilizan matchers para hacer sus validaciones pertinentes.
-
Vamos a usar 2 matchers para estas pruebas toBe y toEqual.
Dicho esto, dentro de nuestra función test de los huevos, escribimos lo siguiente:
expect(huevo().estado[0]).toBe('fresco')
Y en la de espinaca, esto:
expect(espinaca()).toEqual({ estado: 1, color: "verde" })
Cuidándonos al final, así:
describe('Se va a probar la calidad de los ingredientes',() => { test('Calidad del huevo', () => { expect(huevo().estado[0]).toBe('fresco') }); test('Calidad de la espinaca', () => { expect(espinaca()).toEqual({ estado: 1, color: "verde" }) }); })
Y por último en nuestra terminal, nos posicionamos en la carpeta del proyecto y escribimos:
`npm run test:unit`
Si todo lo hicimos bien, debería de salirnos algo así:
Felicidades, has hecho tu primera prueba en Jest.
Con las pruebas que acabamos de hacer, logramos comprobar la equidad sencilla de valores en los elementos y un deep equality para validar datos de tipo objeto.
Estas son funciones que vamos a seguir ocupando y que te van a servir más adelante.
Intenta alguna otra combinación de resultados y compártelos en los comentarios.
