Ejecutar pruebas de Vue.js en un contenedor

Prerrequisitos

Completa todas las secciones anteriores de esta guía, comenzando con Contenedorizar la aplicación Vue.js.

Descripción general

Las pruebas son una parte crítica del proceso de desarrollo. En esta sección, aprenderás a:

• Ejecutar pruebas unitarias usando Vitest dentro de un contenedor Docker.
• Usar Docker Compose para ejecutar pruebas en un entorno aislado y reproducible.

Usarás Vitest — un ejecutor de pruebas ultrarrápido diseñado para Vite — junto con @vue/test-utils para escribir pruebas unitarias que validen la lógica de tus componentes, propiedades (props), eventos y comportamiento reactivo.

Esta configuración garantiza que tus componentes de Vue.js se prueben en un entorno que refleja cómo los usuarios interactúan realmente con tu aplicación.

Ejecutar pruebas durante el desarrollo

La aplicación docker-vuejs-sample incluye un archivo de prueba de muestra en la ubicación:

$ src/components/__tests__/HelloWorld.spec.ts

Esta prueba utiliza Vitest y Vue Test Utils para verificar el comportamiento del componente HelloWorld.

Paso 1: Actualizar compose.yaml

Añade un nuevo servicio llamado vuejs-test a tu archivo compose.yaml. Este servicio te permite ejecutar tu suite de pruebas en un entorno contenedorizado aislado.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

services:
  vuejs-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-vuejs-sample
    ports:
      - "8080:8080"

  vuejs-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
          
  vuejs-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test:unit"]

El servicio vuejs-test reutiliza el mismo Dockerfile.dev utilizado para el desarrollo y sobrescribe el comando por defecto para ejecutar pruebas con npm run test:unit. Esta configuración garantiza un entorno de prueba consistente que coincide con la configuración de tu desarrollo local.

Después de completar los pasos anteriores, el directorio de tu proyecto debería contener los siguientes archivos:

├── docker-vuejs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Paso 2: Ejecutar las pruebas

Para ejecutar tu suite de pruebas dentro del contenedor, ejecuta el siguiente comando desde la raíz de tu proyecto:

$ docker compose run --rm vuejs-test

Este comando:

• Iniciará el servicio vuejs-test definido en tu archivo compose.yaml.
• Ejecutará el script de pruebas usando el mismo entorno que en desarrollo.
• Eliminará automáticamente el contenedor después de que se completen las pruebas gracias al comando docker compose run --rm.

Deberías ver una salida similar a la siguiente:

Test Files: 1 passed (1)
Tests:      1 passed (1)
Start at:   16:50:55
Duration:   718ms

Note

Para obtener más información sobre los comandos de Compose, consulta la referencia de la CLI de Compose.

Resumen

En esta sección, aprendiste a ejecutar pruebas unitarias para tu aplicación Vue.js dentro de un contenedor Docker usando Vitest y Docker Compose.

Lo que has logrado:

• Crear un servicio vuejs-test en compose.yaml para aislar la ejecución de las pruebas.
• Reutilizar el Dockerfile.dev de desarrollo para garantizar la consistencia entre los entornos de desarrollo y de prueba.
• Ejecutar las pruebas dentro del contenedor usando docker compose run --rm vuejs-test.
• Garantizar pruebas confiables y repetibles en todos los entornos sin depender de la configuración de tu máquina local.

Recursos relacionados

Explora las referencias oficiales y las mejores prácticas para perfeccionar tu flujo de trabajo de pruebas con Docker:

• Referencia de Dockerfile – Comprende todas las instrucciones y la sintaxis de Dockerfile.
• Buenas prácticas para escribir Dockerfiles – Escribe Dockerfiles eficientes, fáciles de mantener y seguros.
• Referencia del archivo Compose – Conoce la sintaxis completa y las opciones disponibles para configurar servicios en compose.yaml.
• Referencia de la CLI de docker compose run – Ejecuta comandos de una sola vez en un contenedor de servicio.

Próximos pasos

A continuación, aprenderás cómo configurar un pipeline de CI/CD utilizando GitHub Actions para construir y probar automáticamente tu aplicación Vue.js en un entorno contenedorizado. Esto garantiza que tu código se valide en cada push o pull request, manteniendo la consistencia y la confiabilidad en todo tu flujo de trabajo de desarrollo.