Какие инструменты для тестирования Frontend-приложений вы знаете?

Да ты посмотри, какая хуёвая гора инструментов выросла для фронтенда! Прям как пирамида Хеопса, только вместо камней — сплошные Jest'ы да Cypress'ы. Ну ладно, разберём эту хрень по полочкам, а то голова пухнет.

Модульные тесты (Unit) — там, где каждый чих проверяем Тут всё просто: берём кусочек кода, изолируем его от всего мира и начинаем дрочить разными входными данными. Главные пацаны на районе:

• Jest — это как швейцарский нож, только для тестов. Быстрый, сам всё замокает, снапшоты сделает. Царь и бог.
• Vitest — его младший, но шустрый братан, который заточён под Vite. Летает как угорелый.
• Mocha + Chai / Jasmine — это для ценителей кастомных сборок. Хочешь — асинхронность тестируй, хочешь — свои матчеры пили. Свобода, блядь.

Вот, смотри, как на Jest'е кнопку нажимают, чтоб понять, работает ли она:

import { render, screen, fireEvent } from '@testing-library/react';
test('button click calls handler', () => {
  const handleClick = jest.fn(); // Подсовываем муляж-шпиона
  render(<button onClick={handleClick}>Click me</button>); // Рендерим кнопку
  fireEvent.click(screen.getByText(/click me/i)); // Симулируем клик
  expect(handleClick).toHaveBeenCalledTimes(1); // А ну-ка, вызывалась ли наша функция ровно один раз?
});

Тестирование компонентов и их сволочей-соседей (Интеграционное) Тут уже ближе к жизни: компоненты не в вакууме, а с пропсами, контекстами и прочей хуйней.

• React Testing Library / Vue Test Utils — их философия: "тестируй как пользователь". Не лезь во внутренности, ищи кнопки по тексту, имитируй ввод. Здравый смысл, ёпта.
• Storybook + Chromatic — это вообще отдельная песня. Собираешь галерею всех своих компонентов, как в музее, и потом смотришь, не сломал ли ты случайно хедер, когда фиксил футер. Визуальные регрессии — их конёк.

Сквозное тестирование (E2E) — полный пиздец и адок Вот тут мы уже запускаем целое приложение, и робот начинает тыкать во все кнопки, как самый тупой пользователь. Цель — удостовериться, что весь паровоз доедет из точки А в точку Б.

• Cypress — красавчик. Работает прямо в браузере, у него свой удобный дебаггер, а ещё он умеет "путешествовать во времени" — откатывать состояние теста на любой шаг. Почти магия.
• Playwright — этот чувак более суровый. Он из коробки умеет в Chrome, Firefox и Safari, на разных языках скрипты пили, и может прикинуться хреновым мобильным интернетом или слабым телефоном. Мощь.
• Selenium WebDriver — дедушка. Стандарт, но такой громоздкий, что настройка его — это отдельный квест на выживание. Молодёжь уже не жалует.

Тестирование доступности (A11y) — чтоб не обосраться перед слепыми А то сделаешь красивую кнопку, а скринридер её проигнорирует, и пользователь в ауте.

• axe-core — это библиотека-инквизитор. Она найдёт все косяки: где aria-атрибутов не хватает, где контраст цвета хуёвый. Встраивается куда угодно: в Jest, в Cypress, в Playwright. Просто подключаешь — и она начинает орать на тебя за каждую недоступную хуйню.

Аудит производительности — чтоб не тормозило Тут уже не про логику, а про то, как быстро всё грузится и скроллится.

• Lighthouse — он прямо в Хроме сидит. Жмёшь кнопку — и он выдаёт тебе талмуд на 100 страниц: "Тут картинки жирные, тут скрипты долго парсятся, тут метатеги кривые". Бесплатный консультант.
• WebPageTest — это уже тяжёлая артиллерия. Можешь проверить, как твой сайт будет грузиться в Индии на 3G из 2009 года. Даёт такие подробные графики и водопады загрузки, что можно на них медитировать.

Вот и вся пирамида, блядь. Снизу — юниты, их должно быть овердохуища. Посередине — интеграционные, их поменьше. А наверху — несколько жирных E2E-тестов, которые всё это хозяйство собирают в кучу. Главное — не перевернуть эту хуйню с ног на голову, а то на поддержку тестов времени больше, чем на фичи, уходить будет.