Las pruebas en React

Las pruebas son esenciales para garantizar la calidad y la mantenibilidad de tus aplicaciones React. Vamos a explorar los distintos tipos de pruebas y las herramientas disponibles.

Configuración básica

Create React App ya incluye Jest y React Testing Library. Para los proyectos existentes:

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

Pruebas unitarias

Prueba de un componente simple

// Button.js
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

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

test('rendre le bouton avec le bon texte', () => {
  render(<Button>Cliquez-moi</Button>);
  expect(screen.getByText('Cliquez-moi')).toBeInTheDocument();
});

test('appeler onClick quand le bouton est cliqué', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Cliquez-moi</Button>);
  
  fireEvent.click(screen.getByText('Cliquez-moi'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});