Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

Clase 52 de 53 • Curso Profesional de Vue.js 2

Resumen

¿Cómo configurar UnitTest en aplicaciones Vue con el template Webpack?

Vue.js ofrece una potente herramienta para desarrollar aplicaciones web reactivas e interactivas. Sin embargo, integrar UnitTest con todas las configuraciones necesarias en Vue puede ser una tarea ardua. Afortunadamente, Vue nos facilita la vida al proporcionar un template llamado Webpack, que ya tiene todo configurado para realizar testing. Este template es recomendable para quienes ya tienen experiencia con Vue y buscan profundizar en su configuración con Webpack y Babel.

¿Cómo generar una nueva aplicación con el template Webpack?

Para comenzar, utilizamos el CLI de Vue para crear un nuevo proyecto con este template especial. Esto nos permitirá integrar de forma nativa herramientas como Webpack y Babel, preparándonos además para integrar pruebas unitarias fácilmente.

vue init webpack nombre-del-proyecto
cd nombre-del-proyecto
npm install

Durante el proceso de configuración, se te preguntará si deseas instalar el conjunto completo de herramientas, incluyendo el runtime y diversas configuraciones como ISLint y setup de UnitTest. Para este ejercicio, optamos por configurar solo UnitTest, omitiendo el testing de extremo a extremo.

¿Cuál es la estructura del proyecto con el template Webpack?

Una vez instales las dependencias, notarás que el proyecto generado tiene una estructura más compleja que el template simple de Vue. Esto se debe a que:

Incluye más archivos y configuraciones diversas para Webpack.
Configura un "dev server" con Node y Express.
Integra capacidades nativas para testing.

Es esencial destacar que aunque la estructura es más compleja, la utilización de Vue.js en el desarrollo sigue siendo la misma.

¿Cómo funcionan las pruebas con Karma, Mocha y Chai?

Dentro del directorio test, encontrarás una carpeta unit y un archivo karmaconf que permite configurar el entorno de pruebas. Karma se encarga de ejecutar tests en diferentes navegadores, asegurando que el código funcione correctamente en todos los contextos.

Entendiendo las pruebas con Mocha y Chai

Mocha se utiliza como framework de testing, y Chai, específicamente con la biblioteca Sinology, se encarga de las assertions para verificar que el código funcione como se espera.

describe('Componente Hello', () => {
  it('debería renderizar el contenido correcto', () => {
    // test de Mocha para asegurar que el contenido es correcto
  });

  it('debería tener texto correcto', () => {
    expect(helloData().message).to.equal('Welcome to Your Vue.js App');
  });
});

npm run unit

Al ejecutar npm run unit, Karma compila la aplicación entera y ejecuta los tests, mostrando el output de forma clara en la terminal.

¿Cómo asegurar la compatibilidad entre navegadores?

Un aspecto vital en el testing es asegurar que el código sea funcional en múltiples navegadores, gracias a la capacidad de Karma para correr tests en Chrome, Safari, Internet Explorer, Firefox, e incluso Phantom JS, que es un browser de terminal.

Desarrollo: Usar Phantom JS para un testing rápido desde la terminal.
Producción: Probar en todos los navegadores posibles para garantizar la funcionalidad y fiabilidad del código.

En conclusión, usar el template Webpack de Vue optimiza y facilita el proceso de testing en aplicaciones Vue.js. Su configuración avanzada ofrece pruebas efectivas a través de diferentes navegadores, lo que es crucial para cualquier desarrollador buscando calidad y consistencia en su software.

Alexander Valencia

student•

las unittest son super importantes. es bueno que agregaran esta clase.

Luis Donaldo Lopez Gil

student•

https://vue-test-utils.vuejs.org/

Juan Guzman

student•

ignacio te hago una consulta, como puedo testear un componente de manera unitaria o e2e, donde el mismo hace una llamada a una api? el tema esta en la llamada a la api, eso como se suele manejar, se hace un fake o algo por el estilo?
muchas gracias!

Nacho Anaya

teacher•

Hola, lo que te recomiendo es hacer un mock (una simulacion de funcionalidad) de la llamada a la API. Yo suelo utilizar una lbreria llamada Sinon.js que te permite resolver ese tipo de cosas. Te recomiendo que revises el metodo stub de esa libreria.

Por otro lado analiza bien si necesitas testear el componente o simplemente testear el servicio que contenga la llamada a la API. En ese caso el testeo seria mas sencillo. Te dejo un ejemplo que tiene un caso de uso para testear un metodo de un servicio:

describe('getTrackById()', () => {
  it('should return a given track', () => {

    const track = { id: 1, name: 'Track 1'}
    
    sinon.stub(trackService, 'getById').returns(Promise.resolve({ data: track }))
    const requestUrl = `/track/${track._id}`

    return trackService.getById(track._id)
      .then((res) => {
        assert.equal(res.name, track.name)

        sinon.assert.calledOnce(trackService.getById)
        sinon.assert.calledWith(trackService.getById, requestUrl)

        trackService.getById.restore()
      })
  })
})

Juan Guzman

student•

Muchas gracias! lo voy a probar

Carlos Eduardo Gomez García

teacher•

Ufff esto me encanta, sobre todo porque luego el estarte estresando que en un navegador no funciona es horrible, Safari es mi mayor némesis xD Me encanta que existan estas herramientas de testing, si ya me gusta hacer testing con backend, ahora con frontend uff... y lo mejor de todo es que Platzi tiene un curso especialmente dedicado al testing con Vue:D!

Carlos Rafael Córdova Flores

student•

Si te funcionó?

Carlos Eduardo Gomez García

teacher•

@carlosc.dev A mi si me funcionó, recuerda usar Vue 2 para seguir este curso

Cristian Camilo Galviz Zapata

student•

buen contenido super informacion cada vez mas interesante

David E Lares S

student•

¿los assertions que mencionan aquí, hará referencia directamente a experiencias en TDD? Si vamos al cabo de comparar un valor esperado con un valor real, entonces creo que sí. Si alguien pudiera aclararlo, lo agradecería.

David Quintanilla

student•

Hola Ignacio, tengo una duda, estoy intentando hacer test unitarios en mis componentes, me estoy apoyando del template de webpack que por defecto trae configurado karma y mocha, la cuestión es que yo en mis componentes uso vuex y no encuentro documentación de como testear componentes complejos.

Diego Forero

Team Platzi•

Tal vez te pueda servir este (ingles) http://christophegraniczny.com/testing-my-vuex-store

David Quintanilla

student•

muchas gracias, este post que aportas es para testearlo de forma individual lo cual me parece que es lo correcto, en mi caso al testear un componente que esta usando un getter por ejemplo en una computed property me da un error como el siguiente

computed: {
activities () {
return this.$store.getters[‘ejemplo’]
}
}

VM1126 context.js:243 [Vue warn]: Error in render: “TypeError: Cannot read property ‘getters’ of undefined”

Cristian Giagante

student•

impresionante el curso profesional de vuejs

Kelly Jesus Salazar Sanchez

student•

Muy importante esta parte del curso nunca e podido realizar aplicaciones tanto en backend como en frontend con Unitest

Alejandro González Reyes

student•

Esto de las pruebas unitarias es nuevo para mi, necesito ponerme pilas, no solo es desarrollar, sino estar seguro de que todo el código funciona. Hay curso de test unitarios en Platzi?

Diego Forero

Team Platzi•

Hola, si tenemos un curso con Jasmine https://platzi.com/clases/pruebas-unitarias/

Carlos Godoy

student•

Saludos Ignacio, consulta he estado haciendo mis test y dentro de un componente utilizo una directiva , esta le he hecho un stub con sinon, pero no se interpreta bien al correr el test , tendrías alguna guia del manejo de dependencias de directivas cuando se usan en Vue.use
Gracias

Nacho Anaya

teacher•

Hola, te recomiendo que te fijes en la guia ocifial de test. Hay una seccion que habla de mock, imagino que ahi vas a poder encontrar lo que necesitas y buenos practicas para aplicar.
Saludos!