DEV Community

Maria M.
Maria M.

Posted on

📚 Escribiendo Código Testeable en React

#webdev #javascript #programming #spanish

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;
Enter fullscreen mode Exit fullscreen mode

🧠 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>; };
Enter fullscreen mode Exit fullscreen mode

🛠️ 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> );
Enter fullscreen mode Exit fullscreen mode

✅ 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); });
Enter fullscreen mode Exit fullscreen mode

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(); });
Enter fullscreen mode Exit fullscreen mode

🎭 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(); });
Enter fullscreen mode Exit fullscreen mode

🔧 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

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! 🚀

Top comments (0)