🧱 Суть
Фронтенд-тесты строятся на трёх базовых вещах:
- мокинг → подмена зависимостей
- ассерты → проверка результата
- изоляция → независимость тестов
📦 Проблема
1. Тесты выглядят как «магия»
vi.mock(...)
expect(...)Непонятно, что реально происходит.
2. Тестируется не свой код
Без моков дергается API, localStorage, сторонние функции.
3. Тесты ломаются случайно
Если нет изоляции – один тест влияет на другой.
✅ Решение
Разделять тест на 3 части:
- Подготовка (Arrange)
- Действие (Act)
- Проверка (Assert)
И держать тест изолированным.
💻 Код
Мок функции:
const fn = vi.fn();
fn('hello');
expect(fn).toHaveBeenCalledWith('hello');Мок модуля:
vi.mock('./api', () => ({
fetchData: vi.fn(),
}));Ассерты:
expect(button).toBeDisabled();
expect(fetchData).toHaveBeenCalled();Изоляция:
beforeEach(() => {
vi.clearAllMocks();
});🎯 Вывод
- мокинг → контролируешь окружение
- ассерты → проверяешь поведение
- изоляция → тесты стабильные
- любой тест = подготовка → действие → проверка