Spuneți-ne despre experiența dvs. cu testarea în…

În proiectele mele, am folosit mai multe tipuri de teste pentru a asigura calitatea frontend-ului:

Teste unitare: Cu Jest și React Testing Library pentru a izola și verifica componente, funcții și module individuale. Acest lucru ajută la identificarea rapidă a erorilor logice în părți mici și independente ale codului.

// Exemplu de test unitar pentru un component Button cu Jest și React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('afișează butonul cu textul corect', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Teste de integrare: Pentru a verifica interacțiunea dintre mai multe componente sau module. Acest lucru ajută la asigurarea faptului că diferitele părți ale sistemului funcționează corect împreună. Am folosit și React Testing Library pentru aceasta.

// Exemplu de test de integrare pentru un formular și un buton de submit
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('la trimiterea formularului, onSubmit este apelat cu datele corecte', () => {
  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' });
});

Teste E2E: În unele proiecte, am folosit Cypress sau Playwright pentru a testa scenarii de utilizator de la început până la sfârșit în browser real. Acest lucru ajută la verificarea faptului că aplicația funcționează în ansamblu așa cum se așteaptă pentru utilizatorul final.

// Exemplu de test E2E cu Cypress
// cypress/integration/todo.spec.js
describe('Aplicatia Todo', () => {
  it('ar trebui să adauge un element nou de tip task', () => {
    cy.visit('/'); // Navigare la pagina aplicației

    cy.get('.new-todo').type('Buy milk{enter}'); // Introducere text și apăsare Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Verificare număr elemente
      .first()
      .should('have.text', 'Buy milk'); // Verificare textul primului element
  });
});

Testare snapshot: Cu Jest, pentru capturarea structurii componentului și detectarea modificărilor neintenționate în markup (de exemplu, după refactorizare).

// Exemplu de test snapshot pentru un component Card cu Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se redă corect', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Comparare cu snapshot-ul salvat
});

Consider că testarea este o parte importantă a procesului de dezvoltare, deoarece ajută la menținerea calității codului, facilitează refactorizarea și reduce probabilitatea apariției erorilor în producție. Scriu teste în paralel cu dezvoltarea noilor funcționalități sau înainte de corectarea bug-urilor (abordare TDD, unde este aplicabil).

Spuneți-ne despre experiența dvs. cu testarea în proiecte.