Вопрос с собеседования · Frontend

Как писать юнит-тесты на фронтенде (Vitest, Jest)?

JuniorВыкатка и эксплуатация
Ещё спрашивают так:
  • Что тестировать юнит-тестами во фронтенде?
Коротко

Юнит-тесты проверяют логику без браузера: функции форматирования, расчёты, валидацию, редьюсеры, хуки. Vitest (быстрый, совместим с Vite) и Jest — похожий API: describe, it/test, expect(...).toBe/toEqual/toThrow. Зависимости подменяют моками (vi.fn, vi.mock), таймеры — фейковыми, сеть — моками fetch или MSW. Тесты быстрые, запускаются на каждое изменение и в CI.

  • toBe — строгое равенство, toEqual — по содержимому
  • Тест проверяет поведение, а не внутреннюю реализацию
  • Покрытие — ориентир, а не цель

Подробно

import { describe, it, expect } from 'vitest';
import { formatPrice } from './price';
describe('formatPrice', () => {
  it('добавляет пробелы и рубль', () => {
    expect(formatPrice(12500)).toBe('12 500 ₽');
  });
});

Что хотят услышать

  • Что проверяют юнит-тесты.
  • API describe, it, expect.
  • Моки и фейковые таймеры.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Юнит-тесты фронтенда всегда запускают в настоящем браузере против продакшен-сервера
  • ✗toBe сравнивает объекты по содержимому, поэтому toEqual для объектов вообще не нужен
  • ✓Логику проверяют без браузера через describe, it и expect, зависимости — моками
  • ✗100 % покрытия гарантирует отсутствие ошибок, поэтому это главная метрика качества тестов

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования