Vue.js 3 y Jest: Guía de Pruebas Unitarias Paso a Paso

Vue.js 3 ha revolucionado el desarrollo de front-end con su Composition API y otras características robustas. Sin embargo, escribir código es solo la mitad de la ecuación. La otra mitad es asegurarse de que nuestro código funcione como se espera. Aquí es donde entran en juego las pruebas unitarias. En este artículo, te guiaré en la configuración y escritura de pruebas unitarias para las aplicaciones Vue.js 3 usando la biblioteca Jest.

Tabla de contenidos

¿Por qué Jest?
Configuración inicial
Escribiendo nuestra primera prueba
Explicación de la prueba paso a paso
Conclusión

¿Por qué Jest?

Jest es un marco de pruebas de JavaScript muy popular, que proporciona una serie de características que lo hacen ideal para probar aplicaciones Vue.js. Algunas de estas características incluyen:

Una sintaxis de pruebas simple y fácil de entender.
Un sistema de simulación (mocking) poderoso.
Soporte para pruebas de instantáneas (snapshot testing).

Configuración inicial

Para empezar a usar Jest con Vue.js 3, necesitaremos instalar algunos paquetes. Si estás utilizando Vue CLI, puedes hacerlo fácilmente con el siguiente comando:

vue add unit-jest

Este comando instalará @vue/test-utils y jest en tu proyecto, además de configurar tu archivo jest.config.js para que puedas empezar a escribir pruebas de inmediato.

Escribiendo nuestra primera prueba

Vamos a probar un componente simple en Vue.js 3. Aquí está el componente Saludo.vue que vamos a probar:

<script setup>
  import { ref } from 'vue';
  
  const nombre = ref('');
  
  const emitirSaludo = () => {
    if(nombre.value.trim().length > 0) {
      return `Hola, ${nombre.value}!`;
    }
    return 'Por favor, introduce tu nombre.';
  };
  
  export { nombre, emitirSaludo };
</script>

<template>
  <div>
    <input v-model="nombre" type="text" placeholder="Introduce tu nombre" />
    <button @click="emitirSaludo">Saludar</button>
  </div>
</template>

Este componente muestra un saludo al usuario basado en el nombre que introduce.

Ahora, vamos a escribir una prueba para este componente utilizando Jest:

En un proyecto Vue.js creado con Vue CLI, las pruebas unitarias suelen estar en la carpeta tests/unit. Dentad de esta carpeta, puedes crear un archivo para cada componente o función que quieras probar. Por convención, estos archivos tienen la misma estructura de nombres que los archivos de los componentes, con .spec.js al final.

Por ejemplo, si tienes un componente llamado Saludo.vue y quieres escribir pruebas para él, crearías un archivo llamado Saludo.spec.js en la carpeta tests/unit.

Aquí está la estructura de directorios de ejemplo:

my-vue-project/
├─ src/
│  ├─ components/
│  │  ├─ Saludo.vue
│  │  ├─ ...
├─ tests/
│  ├─ unit/
│  │  ├─ Saludo.spec.js
│  │  ├─ ...

En este ejemplo, Saludo.spec.js es el archivo de prueba para el componente Saludo.vue.

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

describe('Saludo.vue', () => {
  it('emite un saludo cuando se introduce un nombre', async () => {
    const wrapper = mount(Saludo);
    const nombre = 'Juan';
    await wrapper.find('input').setValue(nombre);
    expect(wrapper.find('button').text()).toEqual(`Hola, ${nombre}!`);
  });

  it('muestra un mensaje de error cuando no se introduce ningún nombre', async () => {
    const wrapper = mount(Saludo);
    const nombre = '';
    await wrapper.find('input').setValue(nombre);
    expect(wrapper.find('button').text()).toEqual('Por favor, introduce tu nombre.');
  });
});

En este caso, estamos utilizando mount de @vue/test-utils para renderizar nuestro componente. Luego, utilizamos setValue para introducir el valor en el input. Por último, utilizamos expect de Jest para asegurarnos de que el resultado es el esperado.

Finalmente, puedes ejecutar las pruebas con el comando npm run test:unit si estás utilizando npm, o yarn test:unit si estás utilizando yarn. Estos comandos están configurados por defecto en los proyectos creados con Vue CLI.

Explicación de la prueba paso a paso

Primero, las importaciones.

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

mount es una función de la biblioteca @vue/test-utils que se utiliza para montar y renderizar un componente de Vue en un entorno de prueba. mount devuelve un objeto denominado «wrapper», que contiene muchas funciones útiles para interactuar con el componente renderizado.

Importamos el componente Saludo que queremos probar. La ruta @/components/Saludo.vue significa que estamos importando el componente Saludo.vue desde la carpeta components en la raíz de nuestro proyecto.

A continuación, el bloque de pruebas

describe('Saludo.vue', () => {

describe es una función de Jest que permite agrupar pruebas relacionadas en un bloque de pruebas. El primer argumento es una cadena que generalmente representa el nombre del componente o función que se está probando. Cada prueba en este bloque debe estar relacionada con el componente Saludo.vue.

La primera prueba

it('emite un saludo cuando se introduce un nombre', async () => {

it es otra función de Jest que define una prueba individual. El primer argumento es una cadena que describe el comportamiento esperado del componente o función que se está probando. En este caso, se espera que el componente emita un saludo cuando se introduce un nombre.

const wrapper = mount(Saludo);

Aquí es donde usamos la función mount para montar y renderizar nuestro componente Vue en un entorno de prueba. El resultado se asigna a la variable wrapper.

const nombre = 'Juan';

Esta es una simple declaración de variable que define el nombre que se utilizará para la prueba.

await wrapper.find('input').setValue(nombre);

wrapper.find es una función que permite seleccionar un elemento del componente por su selector. En este caso, estamos seleccionando el elemento input. A continuación, usamos la función setValue para simular la acción de un usuario que introduce un nombre en el elemento input. El valor que se introduce es el nombre definido anteriormente.

expect(wrapper.find('button').text()).toEqual(`Hola, ${nombre}!`);
});

expect es una función de Jest que permite hacer afirmaciones sobre valores en las pruebas. En este caso, esperamos que el texto del botón sea igual a «Hola, Juan!». toEqual es una función de Jest que compara el valor actual con el valor esperado.

La segunda prueba

it('muestra un mensaje de error cuando no se introduce ningún nombre', async () => {

Aquí estamos definiendo una segunda prueba con it. Esta prueba verificará el comportamiento del componente cuando no se introduce ningún nombre.

const wrapper = mount(Saludo);
const nombre = '';
await wrapper.find('input').setValue(nombre);

Estas líneas son casi idénticas a las de la primera prueba. La única diferencia es que, en este caso, el valor que se introduce en el elemento input es una cadena vacía.

expect(wrapper.find('button').text()).toEqual('Por favor, introduce tu nombre.');
});
});

Finalmente, hacemos una afirmación con expect sobre lo que esperamos que sea el texto del botón cuando no se introduce ningún nombre. En este caso, debería ser «Por favor, introduce tu nombre.».

Conclusión

Las pruebas unitarias son esenciales para asegurar la calidad del código en cualquier aplicación. Jest, con su simplicidad y poderosas características, proporciona una excelente opción para probar nuestras aplicaciones Vue.js 3. Asegúrate de incorporar pruebas unitarias en tu flujo de trabajo para hacer tu código más robusto y mantenible.

Recuerda: ¡El código sin pruebas es un código roto!

Si te ha sido útil este artículo y te gustaría profundizar más en Vue.js, te recomiendo que eches un vistazo a nuestro curso Sumérgete en Vue. Este curso abarca todos los aspectos de Vue.js y está diseñado para ayudarte a dominar este potente framework. No sólo aprenderás Vue.js desde cero hasta un nivel avanzado, sino que también estarás preparado para el certificado oficial de Vue. Si estás buscando llevar tus habilidades de Vue.js al siguiente nivel, este curso es la opción perfecta para ti. ¡Espero verte en el curso!