TypeScript / jest – Matchers

Bienvenidos sean a este post, hoy veremos otras opciones de jest.

Estos nos permiten buscar una coincidencia entre un valor esperado y un valor recibido en un test. Para clarificar este concepto vamos a utilizar el proyecto que generamos en este post, sino lo poseen les dejo un link para descargarlo:

Simplemente extraigan el directorio en el pc y ya esta listo para ser utilizado. Nuestro primer paso sera ir al archivo hola.spec.ts y modificaremos su codigo por el siguiente:

it("debe coincidir con tobe", () => {
        expect(1).toBe(2);
});

Aqui utilizamos la funcion toBe para comparar si el valor en expect es igual al de esta funcion, donde en caso de ser verdadero devolvera un true de lo contrario un false. Probemos para ver como es su salida:

$ npm test

> testing@1.0.0 test
> jest

 FAIL  ./hola.spec.ts (7.725 s)
  ✕ debe coincidir con tobe (64 ms)

  ● debe coincidir con tobe

    expect(received).toBe(expected) // Object.is equality

    Expected: 2
    Received: 1

      1 | it("debe coincidir con tobe", () => {
    > 2 |       expect(1).toBe(2);
        |                 ^
      3 | });
      4 |

      at Object.<anonymous> (hola.spec.ts:2:12)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        9.24 s, estimated 53 s
Ran all test suites.
$

Como era de suponerse este test fallo porque los valores no son iguales. Observen que nos indico que es de igualdad (equality), cual valor esperaba, y cual recibio. Tomemos nuevamente este codigo y modifiquemoslo de la siguiente manera:

it("debe coincidir con tobe", () => {
        let objA = { id: 1 };
        let objB = objA;
        expect(objA).toBe(objB);
});

Este ejemplo es similar al anterior pero en lugar de pasar valores lo haremos mediante objetos. Primero crearemos un objeto con un dato, al segundo objeto le asignamos el anterior. Luego pasamos uno a expect y el otro a toBe. Si lo comprobamos veremos la siguiente salida:

$ npm test

> testing@1.0.0 test
> jest

 PASS  ./hola.spec.ts (7.532 s)
  ✓ debe coincidir con tobe (27 ms)

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

En este caso funciono porque los objetos son iguales dado que no solo tienen el mismo dato sino que tambien apuntan a la misma direccion de memoria. Ahora tomemos ese mismo codigo y realicemos la siguiente modificacion:

it("debe coincidir con tobe", () => {
        let objA = { id: 1 };
        let objB = { id: 1 };
        expect(objA).toBe(objB);
});

En esta ocasion modificamos a objB que en lugar de tener asignado al objeto anterior le pasamos el mismo valor que el de objA, que sucedera? Probemos para ver su salida:

$ npm test

> testing@1.0.0 test
> jest

 FAIL  ./hola.spec.ts (55.046 s)
  ✕ debe coincidir con tobe (66 ms)

  ● debe coincidir con tobe

    expect(received).toBe(expected) // Object.is equality

    If it should pass with deep equality, replace "toBe" with "toStrictEqual"

    Expected: {"id": 1}
    Received: serializes to the same string

      2 |       let objA = { id: 1 };
      3 |       let objB = { id: 1 };
    > 4 |       expect(objA).toBe(objB);
        |                    ^
      5 | });
      6 |

      at Object.<anonymous> (hola.spec.ts:4:15)

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

En este caso fallo porque no son lo mismo, por mas que sean el mismo valor no poseen la misma direccion de memoria, tal como lo comentamos anterriormente, por esta razon tomemos este mismo codigo y hagamos la siguiente modificacion:

it("debe coincidir con tobe", () => {
        let objA = { id: 1 };
        let objB = { id: 1 };
        expect(objA).toEqual(objB);
});

En este nuevo codigo quitamos a toBe y lo reemplazamos con toEqual, para verificar si son iguales en informacion. En este caso si lo prueban devolvera que los test son correctos porque ahora solo chequea los datos no incluye a la direccion de memoria como el caso anterior. Otra opcion que podemos usar es toStrictEqual pero hace exactamente lo mismo. Tomemos este codigo y realicemoss la siguiente modificacion:

it("debe estar contenido", () => {
        expect("tinchicus.com").toContain("icus");
});

En este ejemplo primero cambiemos el identificador, no es necesario solo estetico, y en la funcion ahora pasaremos un texto al expect, usaremos una nueva funcion llamada toContain, la cual sirve para verificar si el argumento que le pasamos esta en el contenido del expect. Si lo prueban veran que funcionara porque lo informado se encuentra en el texto pasado en expect. Realicemos la sigiente modificacion en el codigo anterior:

it("debe estar contenido", () => {
        let array = [
                { id: 1 },
                { id: 2 },
                { id: 3 } ];
        expect(array).toContainEqual({ id: 2 });
});

Aqui agregamos un array que posee tres objetos, los cuales cada uno posee un id con su respectivo valor. Luego en el expect pasaremos el array creado anteriormente y a este le aplicaremos la funcion toContainEqual, la cual es similar a la funcion del ejemplo anterior pero orientada a los arrays. Como argumento le pasaremos el objeto con el id 2. Si lo prueban veran que volvera a pasar con exito porque esa propiedad existe en nuestro array. Hagamos una pequeña modificacion en el codigo anterior:

it("debe estar contenido", () => {
        let array = [
                { id: 1 },
                { id: 2 },
                { id: 3 } ];
        expect(array).not.toContainEqual({ id: 4 });
});

Al igual que vimos en otros ejemplos tambien podemos aplicar al not, este es un negador y su funcion es invertir el valor booleano que reciba, a las funciones de verificacion. En este caso se lo aplicamos a toContainEqual donde le pasamos un id que no existe en el array. Si lo prueban, pasara con exito el test debido a que si bien la funcion devuelve un false este es invertido por el not. Para finalizar con los matchers vamos a tomar el codigo anterior y lo modificaremos de la siguiente manera:

function ohno() {
        throw new Error("Oh, no! Algo ocurrio");
}

it("debe ocurrir algo", () => {
        expect(() => { ohno() })
        .toThrowError(new Error("Oh, no! Algo ocurrio"));
});

Primero definiremos una funcion que simplemente debe lanzar un error con un mensaje indicando esto. Lo siguiente sera realizar un test y este en el expect le pasamos una funcion anonima que llama a la funcion anterior, y mediante toThrowError interceptaremos el error que devolvio y le pasaremos como argumento el mismo mensaje que nos devuelve la funcion. Si bien esta es una forma muy grosera de hacerlo tendremos una idea muy basica de como aplicarlo y como trabaja. Si lo prueban nos devolvera lo siguiente:

$ npm test

> testing@1.0.0 test
> jest

 PASS  ./hola.spec.ts (8.41 s)
  ✓ debe ocurrir algo (264 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.036 s, estimated 50 s
Ran all test suites.
$

Si bien el error es forzado y no de manera organica podemos ver como paso el test debido a que este matcher recibio el tipo de error que se esperaba. Tengan esto en cuenta que nos puede ser util para manejar cualquier excepcion/error que pueda suceder en el codigo. Antes de finalizar con este tema les dejo un listado de los matchers que mencionamos:

• toBe, compara dos elementos y deben ser exactamente iguales
• toEqual, idem como el anterior pero solo con los valores
• toContain, para saber si lo informado se encuentra en lo que debemos verificar
• toContainEqual, idem al anterior pero para arrays
• toThrowError, es para verificar si devuelve algun error lo verificado

Y antes de terminar con este tema les dejo un link con todos los archivos utilizados y modificados en este post:

Nota:
En el archivo hola.spec.ts tendran el ultimo codigo que vimos, si necesitan ver otro simplemente reemplacenlo.

En resumen, hoy hemos visto matchers, que son, para que sirven, como se utilizan en jest, algunas particularidades de estos y algunos ejemplos para verlos en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.