Разкажете за вашия опит с тестването в проекти…

В проектите си използвах няколко типа тестове за осигуряване на качеството на фронтенда:

Unit тестове: С използване на Jest и React Testing Library за изолиране и проверка на отделни компоненти, функции и модули. Това помага бързо да се открият логически грешки в малки, независими части от кода.

// Пример за unit тест на компонент Button с Jest и React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('правилно показва бутона с текста', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Интеграционно тестиране: За проверка на взаимодействието между няколко компонента или модули. Това гарантира, че различните части на системата работят правилно заедно. Използвах също React Testing Library.

// Пример за интеграционен тест на форма и бутон за изпращане
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('при изпращане на формата се извиква onSubmit с правилните данни', () => {
  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' });
});

E2E тестове: В някои проекти използвах Cypress или Playwright за тестване на потребителски сценарии от началото до края в реален браузър. Това помага да се провери, че приложението като цяло работи както се очаква за крайния потребител.

// Пример за E2E тест с Cypress
// cypress/integration/todo.spec.js
описва('Todo App', () => {
  it('трябва да добави нова задача', () => {
    cy.visit('/'); // Отиване на страницата на приложението

    cy.get('.new-todo').type('Buy milk{enter}'); // Въвеждане на текст и натискане на Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Проверка на броя елементи
      .first()
      .should('have.text', 'Buy milk'); // Проверка на текста на първия елемент
  });
});

Snapshot тестове: С Jest за фиксиране на структурата на компонента и откриване на неумишлени промени в разметката (например след рефакторинг).

// Snapshot тест на компонент Card с Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card се рендерира правилно', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Сравнение със запазения snapshot
});

Мисля, че тестовете са важна част от процеса на разработка, тъй като помагат за поддържане на качеството на кода, улесняват рефакторинга и намаляват вероятността за грешки в продукцията. Пиша тестове паралелно с разработката на нови функции или преди корекция на бъгове (подход TDD, където е приложимо).

Разкажете за вашия опит с тестването в проекти.