Parli della sua esperienza con i test nei progetti…

Nei progetti, ho utilizzato diversi tipi di test per garantire la qualità del frontend:

Test unitari: Con Jest e React Testing Library per isolare e verificare componenti, funzioni e moduli singoli. Questo aiuta a individuare rapidamente errori logici in parti piccole e indipendenti del codice.

// Esempio di test unitario di un componente Button con Jest e React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renderizza il pulsante con il testo corretto', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Test di integrazione: Per verificare l'interazione tra più componenti o moduli. Questo aiuta a garantire che le diverse parti del sistema funzionino correttamente insieme. Ho anche usato React Testing Library per questo.

// Esempio di test di integrazione di un modulo e di un pulsante di submit
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('la sottomissione del form chiama onSubmit con i dati corretti', () => {
  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' });
});

Test di end-to-end (E2E): In alcuni progetti, ho usato Cypress o Playwright per testare scenari utente dall'inizio alla fine in un browser reale. Questo aiuta a verificare che l'applicazione nel suo insieme funzioni come previsto per l'utente finale.

// Esempio di test E2E con Cypress
// cypress/integration/todo.spec.js
describe('App Todo', () => {
  it('dovrebbe aggiungere un nuovo elemento todo', () => {
    cy.visit('/'); // Visitare la pagina dell'app

    cy.get('.new-todo').type('Buy milk{enter}'); // Inserire testo e premere Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Verificare il numero di elementi
      .first()
      .should('have.text', 'Buy milk'); // Verificare il testo del primo elemento
  });
});

Test di snapshot: Con Jest, per catturare la struttura del componente e rilevare modifiche non intenzionali nel markup (ad esempio, dopo refactoring).

// Esempio di test di snapshot di un componente Card con Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card si rende correttamente', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Confronto con snapshot salvato
});

Ritengo che i test siano una parte importante del processo di sviluppo, poiché aiutano a mantenere la qualità del codice, facilitano il refactoring e riducono la probabilità di errori in produzione. Scrivo test in parallelo allo sviluppo di nuove funzionalità o prima di correggere bug (approccio TDD, quando applicabile).

Parli della sua esperienza con i test nei progetti.