📚 Escribiendo Código Testeable en React

En el desarrollo frontend, escribir código testeable es importante para mantener la calidad y la mantenibilidad de nuestras aplicaciones. Aquí te presentamos una guía simple y efectiva para asegurarte de que tus componentes React sean fáciles de probar.

🧩 Componentes Desglosados y Simples

Divide tu aplicación en componentes pequeños y enfocados, cada uno con una única responsabilidad.

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);
export default Button;

🧠 Evitar Lógica Compleja en los Componentes

Mantén la lógica compleja fuera de los componentes, en funciones que puedan ser probadas por separado.

const calculateTotal = (items) => {
  return items.reduce((total, item) => total + item.price, 0);
};

const Cart = ({ items }) => {
  const total = calculateTotal(items);
  return <div>Total: ${total}</div>;
};

🛠️ Uso de Props para Inyectar Dependencias

Inyecta datos y funciones a través de props en lugar de usar dependencias globales.

const UserGreeting = ({ user, logout }) => (
  <div>
    <p>Hello, {user.name}!</p>
    <button onClick={logout}>Logout</button>
  </div>
);

✅ Escribir Pruebas de Unidad y de Integración

Pruebas de Unidad para funciones individuales:

import { calculateTotal } from './path/to/your/function';

test('calculates total correctly', () => {
  const items = [{ price: 10 }, { price: 20 }];
  expect(calculateTotal(items)).toBe(30);
});

Pruebas de Integración para componentes:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Cart from './Cart';

test('renders total correctly', () => {
  const items = [{ price: 10 }, { price: 20 }];
  render(<Cart items={items} />);
  expect(screen.getByText('Total: $30')).toBeInTheDocument();
});

🎭 Utilizar Mocks y Spies

Usa mocks para simular dependencias y spies para verificar interacciones.

import React from 'react';
import { render, screen } from '@testing-library/react';
import UserGreeting from './UserGreeting';

test('renders user greeting', () => {
  const mockUser = { name: 'John' };
  const mockLogout = jest.fn();
  render(<UserGreeting user={mockUser} logout={mockLogout} />);

  expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  screen.getByText('Logout').click();
  expect(mockLogout).toHaveBeenCalled();
});

🔧 Herramientas Recomendadas

• React Testing Library: Facilita pruebas de integración y simulación de interacciones de usuario. Documentación
• Jest: Framework de pruebas recomendado para React, ideal para pruebas de unidad y mocks. Documentación

🌟 Mejores Prácticas

1. ✏️ Escribir Pruebas Primero: Adopta TDD para asegurar que tu código sea testeable desde el principio.
2. 🧼 Mantener los Componentes Puros: Evita dependencias globales y estados compartidos.
3. 📝 Documentar las Pruebas: Asegúrate de que las pruebas estén bien documentadas para facilitar su mantenimiento.

🎯 Resumen

• 🧩 Componentes Simples: Facilitan la prueba de unidad.
• 🧠 Lógica Separada: Aísla la complejidad en funciones.
• 🛠️ Props para Dependencias: Mejora la testabilidad.
• ✅ Pruebas de Unidad e Integración: Cobertura completa.
• 🎭 Mocks y Spies: Simulan dependencias y verifican interacciones.

Siguiendo estos principios y prácticas, escribirás código React testeable, manteniendo alta la calidad de tus aplicaciones.

📚 Recursos Adicionales

• React Testing Library Documentation
• Jest Documentation
• Overreacted: Blog de Dan Abramov.

Asegúrate de aplicar estos conceptos en tu próximo proyecto y observa cómo mejora la calidad de tu código y la facilidad para mantenerlo. ¡Feliz programación! 🚀