Pruebas Unitarias y Mocking en Vue con Jest

Ya vimos lo que se requiere para realizar pruebas en Vue y como hacer estas pruebas. Ahora, te mostraré una que otra cosa que podríamos hacer mejor y cosas que a mi me orillaron a hablar de este tema.

Semántica

La semántica hace alusión al claro entendimiento léxico de tus pruebas.Sé que suena raro, es super sencillo. Básicamente es que se puedan entender tus pruebas como si estuvieran leyendo un libro.

Nosotros venimos utilizando la función test() para hacer las pruebas. Pero podríamos sustituirla por la función it(), hacen exactamente lo mismo, pero al momento de leer nuestra prueba podríamos leerla como una oración, e.g.

describe(' Making an assertion that',()=>{

	it('should test something',()=>{

	}

}

Fácil de entender y fácil de aplicar.

No solamente tenemos esta alternativa, sino que entre los matchers tenemos mucha variedad. e.g.

En vez de hacer algo como:

expect(something).toBe(true)

Podemos tener algo como esto:

expect(something).resolves.not.toHaveReturned(false)

Esto nos va a ayudar mucho, no solamente a nosotros sino que los demás desarrolladores que revisen nuestro código te amarán por esto.

Mocking de un endpoint de una API

Para hacer un mocking de una API en producción, lo primero que debes tener es que tu función que hace la petición, regrese una promesa. Esta promesa, es la misma que se utiliza cuando requieres hacer una implementación asíncrona, mandas esta promesa y esperas a que se resuelva.

Lo mostraré con nuestro proyecto:

Esa es mi función que hace la llamada y regresa la promesa. Nota que es una función asíncrona y que estoy usando una librería para hacer peticiones llamada axios, esta librería nos va a ayudar a hacer las pruebas mucho más fácil también.

Ya en nuestro archivo de pruebas, lo que debemos hacer primero es importar los módulos que vayamos a utilizar.

import axios from 'axios';

import { shallowMount } from '@vue/test-utils'

import App from '@/App'

Lo siguiente es hacer el mock de nuestro módulo de axios, eso va a significar que la llamada que hicimos con esa librería la vamos a interceptar y hacer un mock.

jest.mock('axios', () => ({

  get: jest.fn(() => Promise.resolve({ data: 3 }))

}));

Con esa función interceptamos el módulo de axios, el método get y le pusimos la salida que nosotros quisimos.

Ya lo único que hace falta es escribir nuestras pruebas y listo.

describe('Fetching data from mock service', () => {

  

  test('Testing the data from the resolved promise', async () => {

    const wrapper = shallowMount(App)

    const res = await wrapper.vm.makeRequest()

    expect(res).toEqual({ data: 3 })

    expect(axios.get).toBeCalledWith('https://pokeapi.co/api/v2/pokemon/0')

  })

En esta prueba, llamamos al método que hace la llamada, y si vemos la respuesta que trae, es la que nosotros definimos, super cool, ¿no?

Code coverage

Este es un tema muy interesante, la primera vez que lo vi, me impresionó bastante.

La premisa de esto es simple. De las pruebas que hagas, se hace un recuento de las líneas de código que existen y se muestra cuantas líneas abarcaron tus pruebas.

Para activar esto en nuestro proyecto solamente debemos de meternos a nuestro archivo jest.config.js

Ponemos estas líneas de código:

"collectCoverage": true,

"collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]

Y listo, solo corremos nuestras pruebas y veremos la magia.

No muestro screenshot, porque quiero que tú mismo veas la sorpresa

---

Me encanto estar contigo en este viaje de sudor y lágrimas. El aprender algo nuevo jamás es sencillo y tú ya estás un paso más adelante de todo al decidir tomar esta oportunidad que la vida te está dando.

Gracias por tomar este curso y espero verte de nuevo.

Te invito a que apruebes el examen del curso y me dejes tu review para conocer tu feedback.

¡Nunca pares de aprender!