Тестируемая архитектура и стратегия тестирования проекта
↑ 8.2 Архитектура фронтенда и паттерны · ← Предыдущая · → Следующая
Зачем это на собесе
Senior отвечает за то, чтобы проект можно было тестировать дёшево: границы, порты и здравая пирамида тестов.
Тестируемая архитектура
- явные границы: UI ↔ логика ↔ доступ к данным;
- порты и адаптеры: интерфейсы для внешнего мира (HTTP, storage, время), реализации подменяются;
- детерминированные правила предметной области — чистые функции;
- зависимости внедряются (параметры,
provide/inject); - побочные эффекты на границах, ядро — чистое.
export interface Clock { now(): Date }
export const isExpired = (exp: Date, clock: Clock) => clock.now() > exp
// в тесте: { now: () => new Date('2026-01-01') }Стратегия по риску
| Уровень | Что | Доля |
|---|---|---|
| Unit | чистая логика, composables, сторы | много |
| Component | поведение компонента с моками сети (MSW) | много |
| Integration | страница + роутер + сторы | средне |
| Contract | соответствие API схеме (OpenAPI, Pact) | по границам |
| E2E | критические пути | мало |
| Visual, a11y | дизайн-система, ключевые страницы | точечно |
Принцип: тестировать поведение, важное для пользователя и бизнеса, а не реализацию.
Тестовые данные и окружение
- фабрики данных (
faker, factory functions); - MSW для моков API в тестах, Storybook и разработке;
- изоляция тестов, детерминированное время;
- стенд с реальным API для смоук-проверки.
Процесс
- тесты в CI на каждый PR, быстрые сначала;
- порог покрытия для нового кода;
- регрессионный тест на каждый исправленный баг;
- отчёт о нестабильных тестах и их карантин с задачей на исправление (не отключение);
- метрики: время прогона, доля flaky, стоимость поддержки.
Вопросы с ответами
Как построить стратегию тестирования проекта?
По риску: много быстрых unit и компонентных тестов на бизнес-логику, контрактные тесты на границах API, несколько E2E на критические сценарии, a11y и визуальные проверки для дизайн-системы.
Что делает код тестируемым?
Внедрение зависимостей, чистая логика отдельно от побочных эффектов, малые компоненты с явными props и событиями, порты для внешних систем.