Test unitarios en VUE (JEST & Vue-Test-Utils) – Parte 1

Test unitarios usando JEST y vue-test-utils

En este curso vamos aprender a realizar test unitarios usando la librería vue-test-utils junto a JEST. 

Ya que no voy a profundizar en el uso de JEST, si lo necesitas, tienes la documentación oficial y también un curso de test unitarios usando JEST en mi blog.

Vue-test-utils es una librería de utilidades para realizar test unitarios en Vue, de hecho es la librería oficial que aconsejan desde Vue.

Como nos queremos centrar en aprender a realizar test unitarios, usaremos el CLI de Vue para crear un proyecto básico y así empezar a realizar nuestros test unitarios.

Para crear una estructura básica de un proyecto en Vue usaremos el siguiente comando: vue create xxx, donde xxx es el nombre de nuestra aplicación.

Por cierto, si queremos usar el CLI de Vue es necesario tenerlo instalado, en el caso de no tener instalado el CLI de Vue usaremos el siguiente comando: npm i -g @vue/cli.

Bien, crearemos entonces nuestro proyecto base usando el siguiente comando: vue create myapp.

Una vez creado el esqueleto básico de nuestra aplicación entraremos en la carpeta del proyecto (myapp), y desde allí podemos usar algunos de scripts definidos dentro del package.json.

  • npm run serve: Arrancar nuestro servidor en local y probar la aplicación
  • npm run build: Construimos el proyecto para distribuirlo a nuestro servidor de producción
  • npm run lint: Ejecutamos un validador de código para avisarnos de los fallos en nuestro código
  • npm run test:unit: Para ejecutar nuestros test unitarios

Nosotros nos centraremos en el comando test:unit, así que ejecutaremos desde la consola el siguiente comando: npm run test:unit

Enhorabuena!!!, ya tienes un proyecto y has ejecutado tu primer test unitario.

Creando nuestro componente para realizar los test

Si hiciéramos TDD entonces deberíamos seguir los siguientes pasos:

  1. Crear el test
  2. Comprobar que falla
  3. Escribir el código
  4. Comprobar que funciona
  5. Refactorizar
  6. Volver al paso 1

Para nuestro ejemplo y puesto que estamos aprendiendo a realizar test unitarios, crearemos primero el componente y así evitaremos complicaciones.

El componente que he creado es bastante sencillo, simplemente es una barra de navegación y se encuentra en la siguiente ruta: src/components/TheHeader.vue

<template>
  <nav class="menu">
    <ul>
      <li class="selected"><a href="#">Home</a></li>
      <li class="selected"><a href="#">About</a></li>
      <li class="selected"><a href="#">Contact</a></li>
      <li v-text="title"></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'the-header',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  ul {
    list-style: none;
    background: #333;
    display: flex;
    align-items: center;
    color: white;
    li {
      padding: 10px;
      cursor: pointer;
      &.selected {
        transition: ease-in-out 220ms;
        a {
          color: white;
          display: block;
          text-decoration: none;
        }
        &:hover {
          background: cadetblue;
          color: white;
          transition: ease-in-out 220ms;
        }
      }
    }
  }
}


</style>

Ahora si!!, vamos a crear nuestro primer test

En nuestro primer test solo vamos hacer dos comprobaciones:

  • Comprobar que el componente se esta pintando
  • Comprobar que el texto que le pasamos se pinta en el componente

Bien, como ya tenemos claro los test que vamos a realizar ahora crearemos nuestro fichero con los test

Para ello crearemos un fichero con el nombre del componente con la siguiente extensión spec.js en la carpeta test/unit/

Dentro del fichero añadiremos el siguiente código:

// Importamos las utilidades de la librería vue-test-utils
import { mount } from '@vue/test-utils';
// Importamos nuestro componente
import TheHeader from '@/components/TheHeader.vue';
// Definimos de que se trata la prueba
describe('Componente TheHeader.vue', () => {
  // Test
  it('El componente se ha pintado', () => {
    const wrapper = mount(TheHeader);
  });
});

En el código anterior estamos usando dos palabras clave nuevas que nos ofrece JEST para realizar los test:

  • describe: Definimos de que se trata el test que vamos a realizar.
  • it: Donde realizamos el test que debemos cumplir.

Como habíamos comentado al principio, vamos a realizar el montaje del componente para nuestra prueba usando la siguiente linea: const wrapper = mount(TheHeader).

En este momento si pasamos el test se mostrara como correcto, pero es que realmente todavía no hemos realizado ninguna comprobación.

Para que los test puedan comprobar el funcionamiento necesitamos realizar una afirmación (assertions).

Para realizar las afirmaciones (assertions), usaremos la palabra clave expect usando la siguiente sintaxis: expect(result).to[matcher](actual).

Para entender la sintaxis anterior, crearemos un ejemplo

import { mount } from '@vue/test-utils';
describe('Componente TheHeader.vue', () => {
  it('Comprobamos si el test funciona', () => {
    expect(true).toBeTruthy();
  });
});

Ahora vamos a crearemos nuestros test para comprobar nuestro requisitos.

import { mount } from '@vue/test-utils';
import TheHeader from '@/components/TheHeader.vue';

describe('Componente TheHeader.vue', () => {
  const wrapper = mount(TheHeader);
  it('Comprobamos si el test funciona', () => {
    expect(true).toBeTruthy();
  });
  it('El componente se ha pintado', () => {
    expect(wrapper.vm.$refs.menu).not.toBeUndefined();
  });
  it('Comprobamos que el título se esta pintando', () => {
    wrapper.setProps({ title: 'Menú APP' });
    expect(wrapper.html().includes('Menú APP')).toBeTruthy();
  });
});

Con estos test ya tendríamos las dos comprobaciones que necesitábamos:

  • Comprobar que se pinta el componente
  • Comprobar que se pinta el título.