El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

Las pruebas unitarias son una parte esencial del desarrollo de software, ya que permiten verificar que las unidades individuales de código funcionen como se espera. En el contexto de Vue.js, Vue Test Utils es una biblioteca oficial que facilita la creación de pruebas unitarias para componentes Vue.

Objetivos de esta sección:

Entender qué es Vue Test Utils y por qué es útil.
Configurar el entorno de pruebas.
Escribir y ejecutar pruebas unitarias básicas para componentes Vue.

¿Qué es Vue Test Utils?

Vue Test Utils es una biblioteca oficial de Vue.js que proporciona utilidades para probar componentes Vue. Permite montar componentes, interactuar con ellos y verificar su comportamiento en un entorno de pruebas.

Características principales:

Montaje de componentes: Permite montar componentes en un entorno de pruebas.
Simulación de eventos: Facilita la simulación de eventos como clics, entradas de teclado, etc.
Acceso a propiedades y métodos: Permite acceder y modificar propiedades y métodos de los componentes.
Snapshots: Permite capturar el estado del componente en un momento dado para comparaciones futuras.

Configuración del Entorno de Pruebas

Antes de comenzar a escribir pruebas, necesitamos configurar nuestro entorno de pruebas. Para este ejemplo, utilizaremos Jest como nuestro framework de pruebas.

Paso 1: Instalar Dependencias

Primero, instalemos las dependencias necesarias:

npm install --save-dev @vue/test-utils jest vue-jest babel-jest

Paso 2: Configurar Jest

Crea un archivo de configuración para Jest (jest.config.js):

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testMatch: ['**/tests/**/*.spec.js'],
  testURL: 'http://localhost/'
};

Paso 3: Configurar Babel

Asegúrate de tener un archivo de configuración de Babel (babel.config.js):

module.exports = {
  presets: ['@babel/preset-env']
};

Escribiendo Pruebas Unitarias

Ejemplo de Componente

Supongamos que tenemos un componente simple Counter.vue:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Escribiendo la Prueba

Crea un archivo de prueba para el componente Counter.vue en tests/unit/Counter.spec.js:

import { shallowMount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('renders the initial count', () => {
    const wrapper = shallowMount(Counter);
    expect(wrapper.text()).toContain('0');
  });

  it('increments the count when button is clicked', async () => {
    const wrapper = shallowMount(Counter);
    const button = wrapper.find('button');
    await button.trigger('click');
    expect(wrapper.text()).toContain('1');
  });
});

Explicación del Código

Importaciones: Importamos shallowMount de @vue/test-utils y el componente Counter.
Describe Block: Agrupamos nuestras pruebas relacionadas con Counter.vue dentro de un bloque describe.
Prueba Inicial: Verificamos que el componente renderiza el conteo inicial correctamente.
Prueba de Incremento: Simulamos un clic en el botón y verificamos que el conteo se incrementa.

Ejecutando las Pruebas

Para ejecutar las pruebas, simplemente corre el siguiente comando:

npm run test

Conclusión

En esta sección, hemos aprendido a configurar un entorno de pruebas para Vue.js utilizando Vue Test Utils y Jest. También hemos escrito y ejecutado pruebas unitarias básicas para un componente Vue. Las pruebas unitarias son cruciales para asegurar la calidad y la fiabilidad de nuestras aplicaciones.

Resumen:

Vue Test Utils: Biblioteca oficial para pruebas unitarias en Vue.js.
Configuración: Instalación y configuración de Jest y Babel.
Pruebas Básicas: Escribir y ejecutar pruebas unitarias para componentes Vue.

En la siguiente sección, profundizaremos en pruebas más avanzadas y técnicas para mejorar la cobertura y la calidad de nuestras pruebas.

Pruebas Unitarias con Vue Test Utils

Introducción

Objetivos de esta sección:

¿Qué es Vue Test Utils?

Características principales:

Configuración del Entorno de Pruebas

Paso 1: Instalar Dependencias

Paso 2: Configurar Jest

Paso 3: Configurar Babel

Escribiendo Pruebas Unitarias

Ejemplo de Componente

Escribiendo la Prueba

Explicación del Código

Ejecutando las Pruebas

Conclusión

Resumen:

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js