# 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](/guides/reactjs/run-tests/containerize/).

## 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](https://vitest.dev) —un ejecutor de pruebas extremadamente rápido diseñado para Vite— junto con [Testing Library](https://testing-library.com/) 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:

```console
$ 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:

```console
$ 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:

```json
"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:

```ts {hl_lines="14-18",linenos=true}
/// <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](https://vitest.dev/config/).

### 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.

```yaml {hl_lines="22-26",linenos=true}
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](/guides/reactjs/run-tests/develop/) 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:

```text
├── 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:

```console
$ 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`](/reference/cli/docker/compose/run/).

> [!NOTE]
> Para obtener más información sobre los comandos de Compose, consulta la [referencia de la CLI de Compose](/reference/cli/docker/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](/reference/dockerfile/) – Conoce todas las instrucciones y la sintaxis de Dockerfile.
- [Mejores prácticas para escribir Dockerfiles](/develop/develop-images/dockerfile_best-practices/) – Escribe Dockerfiles eficientes, fáciles de mantener y seguros.
- [Referencia del archivo Compose](/compose/compose-file/) – Aprende la sintaxis completa y las opciones disponibles para configurar servicios en `compose.yaml`.
- [Referencia de la CLI de `docker compose run`](/reference/cli/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.