¿Cómo se prueban los componentes en Vue.JS? Guía en español 🃏

Esta introducción a Jest te ayudará a escribir y probar tus componentes Vue.js 🃏

Testing unitario con Jest 🃏

VueJS es un framework de JavaScript que mezcla lo mejor de Angular + ReactJS para crear aplicaciones FrontEnd (o de Interfaz). Entre sus características positivas, Vue destaca por lo fácil que es aprenderlo y lo bien que se puede desempeñar en proyectos grandes o pequeños.

Para este post, debes repasar un poco sobre:

• VSCode (u otro IDE de su preferencia)

• Git Bash

• Node.js

• npm

• Vue CLI

• Vue Test Utils

• Crear y configurar un proyecto Vue.js

• JSDOM (entorno de navegador virtual)

• Y cómo utilizar las funciones esenciales

En el caso que estés aprendiendo y te guste estudiar online, te recomendamos revisar esta lista de los mejores tutoriales de Vue JS para principiantes. Si quieres repasar un poco sobre UnitTests (pruebas unitarias) antes de llegar acá, te presentamos Jest.

Testing con Vue

TALK DE LA SEMANA

¿Cómo iniciamos con Jest?

Empecemos por configurar Jest.

Instalamos el paquete npm de Jest como devDependencias. Y para usarlo requerimos también de Vue Test Utils (@vue/test-utils):

npm i jest -D
npm install test-utils vue-jest babel-jest -D

Luego, el comando para ejecutar las pruebas unitarias:

npm run test:unit

¿Recuerdas que necesitábamos un componente testable?

El primer paso, es implementar desarrollo guiado por pruebas o simplemente TDD (Test-Driven Development):

• Escribir un test.

• Validar la prueba.

• Escribir el código.

• Refactorizar si funciona o no.

Dentro del folder __tests__ se almacena la estructura para pruebas unitarias. Jest ejecutará los archivos de extensión *.test* o *.spec* dentro del proyecto. Como decía, estos irán siempre dentro de la carpeta tests y su nombre estará dado preferiblemente por el mismo nombre del componente a probar.

src
├── components
│   ├── __tests__
│   ├── Exmaples
│   │   ├── __tests__
│   │   │   ├── Data.spec.js	-> component to test
│   │   ├── Data.vue		-> component
:8080

Afirmaciones Simples:

import { shallowMount } from '@vue/test-utils';
import Component from '../Data.vue';

describe('Example.vue', () => {
  it('renders from data', () => {
    const msg = 'Melt Talk';
    const wrapper = shallowMount(Component);
    expect(wrapper.text()).toMatch(msg);
  });
});

En este test, probaremos la variable msg.

Nota que:

• Import: Traemos el set de herramientas de pruebas de Vue.js y el componente que vamos a probar “Data”

• Describe: Un texto que, como su nombre dice, describa el conjunto de pruebas.

• it: Cada una de las pruebas, una descripción específica de lo que se evalúa.

• expect(): Con este comprobamos que el valor de los resultados de las funciones sean el valor que se espera en cada prueba.

• ShallowMount() tiene varias propiedades para simular propiedades del componente. La práctica común es invocar shallowMount() y almacenar el componente simulado en wrapper antes de cada prueba y destruirlo en wrapper después.

Código simple:

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'example',

  data() {
    return {
      msg: 'Melt Talk'
    };
  }
};
</script>

Este sencillo componente Data.vue retornará msg: ‘Melt Talk’ si corremos las pruebas; por lo que tu terminal debe responder lo siguiente:

El manejo del API de Jest y Vue Test Utils, nos permitirá realizar pruebas simples e incluso más complejas y además permiten que sea refactorizable. Por otro lado, si tenemos constants, Async callbacks o por lo general promesas, trabajamos de una forma diferente, por ejemplo:

Testing Vue.js

Una vez el proyecto de Vue está generado, corra e inicie el server localhost:8080, debería ver algo como esto en el navegador:

Reutilizaremos la estructura del proyecto generado por Vue y agregaremos en /src/views/ una nueva vista llamada CoinList.vue.

Además, crearemos un componente testable dentro de /src/components/ llamado table que redirige los items de cada fila de la tabla a una página diferente y así realizar una práctica más cercana a un proyecto de desarrollo real.

Demo

Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.

ⓘ Diferencia entre Shallow y Mount

En primera instancia, Shallow nos crea y además prueba el componente solo , es decir, sin hijos.

Mientras que Mount, hace lo mismo, pero sí se tiene en cuenta a los hijos además del componente padre/host, permitiendo métodos de ciclo de vida.

Enlace al repositorio demo vue-jest.

---

¡Gracias por leer!

📍 Conéctate con nosotros en instagram👇