Cuéntenos sobre su experiencia en pruebas en…

En los proyectos, he utilizado varios tipos de pruebas para garantizar la calidad del frontend:

Pruebas unitarias: Con Jest y React Testing Library para aislar y verificar componentes, funciones y módulos individuales. Esto ayuda a detectar errores lógicos rápidamente en partes pequeñas e independientes del código.

// Ejemplo de prueba unitaria de un componente Button con Jest y React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renderiza el botón con el texto correcto', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Pruebas de integración: Para verificar la interacción entre varios componentes o módulos. Esto ayuda a asegurarse de que las diferentes partes del sistema funcionen correctamente juntas. También utilicé React Testing Library para esto.

// Ejemplo de prueba de integración de un formulario y un botón de envío
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('al enviar el formulario, llama a onSubmit con los datos correctos', () => {
  const mockSubmit = jest.fn();
  render(<Form onSubmit={mockSubmit} />);

  const input = screen.getByLabelText(/Username:/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  fireEvent.change(input, { target: { value: 'testuser' } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
});

Pruebas E2E: En algunos proyectos, utilicé Cypress o Playwright para probar escenarios de usuario de principio a fin en un navegador real. Esto ayuda a verificar que la aplicación en su conjunto funcione como se espera para el usuario final.

// Ejemplo de prueba E2E en Cypress
// cypress/integration/todo.spec.js
describe('Aplicación Todo', () => {
  it('debería agregar un nuevo elemento de tarea', () => {
    cy.visit('/'); // Navegar a la página de la aplicación

    cy.get('.new-todo').type('Buy milk{enter}'); // Escribir y presionar Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Verificar la cantidad de elementos
      .first()
      .should('have.text', 'Buy milk'); // Verificar el texto del primer elemento
  });
});

Pruebas de instantáneas (Snapshot): Con Jest, para capturar la estructura del componente y detectar cambios no intencionados en el marcado (por ejemplo, después de refactorizaciones).

// Ejemplo de prueba de instantáneas de un componente Card con Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se renderiza correctamente', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Comparar con la instantánea guardada
});

Considero que las pruebas son una parte importante del proceso de desarrollo, ya que ayudan a mantener la calidad del código, facilitan la refactorización y reducen la probabilidad de errores en producción. Practico escribir pruebas junto con el desarrollo de nuevas funcionalidades o antes de corregir errores (enfoque TDD, cuando es aplicable).

Cuéntenos sobre su experiencia en pruebas en proyectos.