Mejores prácticas y tips para hacer pruebas en Vue

12/12

Lectura

Mejores prácticas y tips para hacer pruebas en Vue

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:

1.png

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!

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Me encanto el curso, recomiendo los siguientes cursos:

Para integración Continua: https://platzi.com/clases/travis/

Entendi bastante bien, pero el codigo estaba demasiado desorganizado. El tema estuvo bien explicado, pero falto un poco de orden   🥺

Estuvo bien como un acercamiento a las pruebas pero me hubiese gustado profundizar mucho más en este tema con Vue, ya que hay muchos temas que se podrían explicar mucho mejor, pero estuvo bien ^^

El curso como introductorio estuvo muy bien, es claro que hay mucho más contenido en esto de las pruebas unitarias y de integración, siempre escucho mencionarlas para Backend, pero es bueno también ver que en Frontend existen y como o que puntos deberían tenerse en cuenta, gracias!

Gracias por el curso, para mí fue una aproximación a este mundo de las pruebas unitarias

Muy buen curso! gracias por todos los recursos que me diste! Lo intentare aplicar en mis proyectos lo mas que pueda! Saludos!

Gracias por el curso César, muy bueno el contenido.

Algún curso que recomienden para continuar con esto de las pruebas y la integración continua.

Estuvo muy bueno el curso hubiera sido genial que dejara el repo donde quedara todo el codigo para poder revisarlo en caso de typos

Excelente contenido para empezar a hacer testing.