Ejecuta pruebas de React.js en un contenedor

Prerrequisitos

Completa todas las secciones anteriores de esta guía, comenzando con Contenerizar una aplicación de React.js.

Resumen

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

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

Utilizarás Vitest —un ejecutor de pruebas extremadamente rápido diseñado para Vite— junto con Testing Library para las aserciones.

Ejecuta pruebas durante el desarrollo

La aplicación docker-reactjs-sample incluye un archivo de prueba de ejemplo en la siguiente ubicación:

$ src/App.test.tsx

Este archivo utiliza Vitest y React Testing Library para verificar el comportamiento del componente App.

Paso 1: Instala Vitest y React Testing Library

Si aún no has agregado las herramientas de prueba necesarias, instálalas ejecutando:

$ npm install --save-dev vitest @testing-library/react @testing-library/jest-dom jsdom

Luego, actualiza la sección de scripts de tu archivo package.json para incluir lo siguiente:

"scripts": {
  "test": "vitest run"
}

Paso 2: Configura Vitest

Actualiza el archivo vitest.config.ts en la raíz de tu proyecto con la siguiente configuración:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
  test: {
    environment: "jsdom",
    setupFiles: "./src/setupTests.ts",
    globals: true,
  },
});

Note

Las opciones de test en vitest.config.ts son esenciales para realizar pruebas confiables dentro de Docker:

• environment: "jsdom" simula un entorno similar al de un navegador para el renderizado y las interacciones con el DOM.
• setupFiles: "./src/setupTests.ts" carga la configuración global o simulaciones (mocks) antes de cada archivo de prueba (opcional pero recomendado).
• globals: true habilita funciones de prueba globales como describe, it y expect sin necesidad de importarlas.

Para obtener más detalles, consulta la documentación de configuración oficial de Vitest.

Paso 3: Actualiza compose.yaml

Agrega un nuevo servicio llamado react-test a tu archivo compose.yaml. Este servicio te permite ejecutar tu suite de pruebas en un entorno contenerizado y 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:
  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test"]

El servicio react-test reutiliza el mismo Dockerfile.dev que se usa para el desarrollo y sobrescribe el comando predeterminado para ejecutar las pruebas con npm run test. Esta configuración garantiza un entorno de pruebas coherente que coincide con la configuración de tu desarrollo local.

Al finalizar los pasos anteriores, el directorio de tu proyecto debería contener los siguientes archivos:

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

Paso 4: Ejecuta 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 react-test

Este comando hará lo siguiente:

• Iniciará el servicio react-test definido en tu archivo compose.yaml.
• Ejecutará el script npm run test utilizando el mismo entorno que el desarrollo.
• Eliminará automáticamente el contenedor después de que finalicen las pruebas mediante el comando docker compose run --rm.

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 de React.js dentro de un contenedor de Docker utilizando Vitest y Docker Compose.

Lo que lograste:

• Instalaste y configuraste Vitest y React Testing Library para probar componentes de React.
• Creaste un servicio react-test en compose.yaml para aislar la ejecución de las pruebas.
• Reutilizaste el Dockerfile.dev de desarrollo para garantizar la coherencia entre los entornos de desarrollo y de pruebas.
• Ejecutaste pruebas dentro del contenedor utilizando docker compose run --rm react-test.
• Garantizaste pruebas confiables y repetibles en todos los entornos sin depender de la configuración de la 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 – Conoce todas las instrucciones y la sintaxis de Dockerfile.
• Mejores prácticas para escribir Dockerfiles – Escribe Dockerfiles eficientes, fáciles de mantener y seguros.
• Referencia del archivo Compose – Aprende la sintaxis completa y las opciones disponibles para configurar servicios en compose.yaml.
• Referencia de la CLI de docker compose run – Ejecuta comandos puntuales en un contenedor de servicio.

Próximos pasos

A continuación, aprenderás cómo configurar un flujo de trabajo de CI/CD utilizando GitHub Actions para construir y probar automáticamente tu aplicación de React.js en un entorno contenerizado. Esto garantiza que tu código se valide con cada subida o solicitud de extracción (pull request), manteniendo la coherencia y la confiabilidad a lo largo de tu flujo de trabajo de desarrollo.