🧪 Testing con Jest y React Testing Library

🧪 Testing con Jest y React Testing Library

Aprende cómo probar tus componentes, hooks y lógica de negocio en Next.js utilizando Jest y React Testing Library, las herramientas más populares del ecosistema React.

---

🧩 ¿Por qué hacer testing en Next.js?

El testing es una parte fundamental del desarrollo profesional. Permite asegurar que los componentes funcionan como se espera y que futuras actualizaciones no rompan la aplicación.

Con Jest podemos ejecutar pruebas unitarias y de integración, mientras que React Testing Library (RTL) nos permite probar componentes simulando cómo los usaría un usuario real.

---

⚙️ Instalación y configuración inicial

Primero, instala Jest y React Testing Library en tu proyecto:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom ts-jest

Luego crea un archivo de configuración para Jest en la raíz del proyecto:

📄 jest.config.js

/** @type {import('jest').Config} */
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/app/$1',
  },
};

module.exports = createJestConfig(customJestConfig);
      

Y crea el archivo de configuración adicional:

📄 jest.setup.js

import '@testing-library/jest-dom';
      

💡 Consejo: Usa testEnvironment: 'jsdom' para simular el entorno del navegador y poder renderizar componentes React.

---

🧠 Ejemplo básico: probando un componente

Veamos un ejemplo con un componente simple llamado Boton.tsx:

📄 app/components/Boton.tsx

type Props = {
  label: string;
  onClick: () => void;
};

export default function Boton({ label, onClick }: Props) {
  return (
    <button onClick={onClick} className="bg-blue-500 text-white p-2 rounded">
      {label}
    </button>
  );
}
      

📄 app/components/__tests__/Boton.test.tsx

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

describe('Boton Component', () => {
  test('muestra el texto correctamente', () => {
    render(<Boton label="Hacer clic" onClick={() => {}} />);
    expect(screen.getByText('Hacer clic')).toBeInTheDocument();
  });

  test('ejecuta la función onClick al hacer clic', () => {
    const handleClick = jest.fn();
    render(<Boton label="Enviar" onClick={handleClick} />);
    fireEvent.click(screen.getByText('Enviar'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});
      

Este test verifica que el componente Boton:

• ✅ Muestra el texto recibido en las props
• ✅ Llama a la función onClick al hacer clic

---

👁️ Ejemplo visual del componente

Así se vería el componente Boton renderizado en la interfaz.

---

🔁 Probando Hooks personalizados

También puedes probar hooks utilizando @testing-library/react-hooks (ahora parte de RTL).

📄 hooks/useContador.ts

import { useState } from 'react';

export function useContador() {
  const [contador, setContador] = useState(0);

  const incrementar = () => setContador(contador + 1);

  return { contador, incrementar };
}
      

📄 hooks/__tests__/useContador.test.ts

import { renderHook, act } from '@testing-library/react';
import { useContador } from '../useContador';

test('incrementa el contador correctamente', () => {
  const { result } = renderHook(() => useContador());
  act(() => {
    result.current.incrementar();
  });
  expect(result.current.contador).toBe(1);
});
      

---

🚀 Beneficios del Testing en Next.js

• 🧠 Detección temprana de errores antes del despliegue
• 🧩 Confianza al refactorizar componentes
• ⚡ Integración fácil con CI/CD (Vercel, GitHub Actions, etc.)
• 📈 Código más mantenible y confiable

---

✅ Conclusión

El testing con Jest y React Testing Library es esencial para aplicaciones Next.js robustas. Con una configuración mínima, puedes asegurar que tus componentes, hooks y rutas funcionen correctamente antes de llegar al entorno de producción.

← Volver al índice