Misión 1 · Lección 7

Integración, Pruebas e Implementación en React

Objetivos

• Integrar componentes en una aplicación completa.
• Aprender a realizar pruebas básicas con React Testing Library.
• Optimizar la aplicación para producción.
• Implementar la app en un servicio de despliegue (ej. Vercel o Netlify).

Estructura del Proyecto

• src/components/ — componentes reutilizables.
• src/App.jsx — lógica principal y composición.
• src/context/ — estado global (opcional).
• tests/ — pruebas unitarias y de integración.

Integración de Componentes

// App.jsx
import Header from "./components/Header";
import TaskForm from "./components/TaskForm";
import TaskList from "./components/TaskList";

export default function App() {
  return (
    <div>
      <Header />
      <TaskForm />
      <TaskList />
    </div>
  );
}

El componente App orquesta toda la aplicación.

Pruebas con React Testing Library

Ejemplo de prueba unitaria de un componente:

// tests/Header.test.jsx
import { render, screen } from "@testing-library/react";
import Header from "../src/components/Header";

test("renderiza el título", () => {
  render(<Header />);
  expect(screen.getByText("Lista de Tareas")).toBeInTheDocument();
});

Pruebas de interacción

// tests/TaskForm.test.jsx
import { render, screen, fireEvent } from "@testing-library/react";
import TaskForm from "../src/components/TaskForm";

test("agrega una nueva tarea", () => {
  render(<TaskForm onAgregarTarea={() => {}} />);
  const input = screen.getByPlaceholderText("Nueva tarea...");
  fireEvent.change(input, { target: { value: "Estudiar React" } });
  fireEvent.submit(input.closest("form"));
  expect(input.value).toBe(""); // se limpia el campo
});

Optimización para Producción

• npm run build genera la versión optimizada.
• Se minifican y optimizan los archivos.
• El resultado está en la carpeta dist/.
• Puede desplegarse en cualquier hosting estático.

Despliegue en Vercel

1. Instalar CLI: npm i -g vercel.
2. Ejecutar vercel en el proyecto.
3. Seguir las instrucciones (conectar cuenta y elegir proyecto).
4. Tu aplicación quedará en línea con una URL pública.

Buenas Prácticas

• Separar lógica en componentes pequeños y reutilizables.
• Escribir pruebas unitarias para componentes clave.
• Usar useMemo y React.memo en listas grandes.
• Configurar un repositorio Git y CI/CD (ej. GitHub Actions).

Ejercicio Guiado 🛠️

1. Integra tus componentes (Header, TaskForm, TaskList) en App.jsx.
2. Escribe al menos una prueba unitaria y una de interacción con Testing Library.
3. Ejecuta npm run build y despliega tu app en Vercel o Netlify.