Какой у вас опыт в тестировании фронтенда (Frontend)?

Опыт включает тестирование на разных уровнях:

1. Модульное (Unit) и компонентное тестирование:

• Инструменты: Jest, Vitest, React Testing Library.
• Цель: Проверка изолированной логики функций и отрисовки React/Vue-компонентов.

• Пример теста на Jest:

  // Тест функции-утилиты
  import { formatDate } from './utils';
  
  test('formatDate returns correct string', () => {
    const date = new Date('2023-12-01');
    expect(formatDate(date)).toBe('01.12.2023');
  });

2. Интеграционное тестирование:

• Проверка взаимодействия нескольких компонентов или модулей (например, форма отправляет корректные данные в API-сервис).

3. End-to-End (E2E) тестирование:

• Инструменты: Cypress, Playwright.
• Цель: Автоматизация пользовательских сценариев в реальном браузере.
• Пример сценария входа в систему (Cypress):

  it('Успешный вход в систему', () => {
    cy.visit('/login');
    cy.get('[data-testid="email-input"]').type('user@example.com');
    cy.get('[data-testid="password-input"]').type('securePass123');
    cy.get('[data-testid="submit-btn"]').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Добро пожаловать, User!').should('be.visible');
  });

4. Визуальное (UI) регрессионное тестирование:

• Инструменты: Percy, Chromatic, Loki.
• Сравнение скриншотов интерфейса с эталонными для выявления незапланированных изменений.

5. Кросс-браузерное и кросс-платформенное тестирование:

• Проверка корректности отображения и работы в разных браузерах (Chrome, Firefox, Safari) и на разных устройствах.