Как проверить логику приложения с помощью Vitest

Приложение работает, пока вы проверяете его вручную. Затем меняете функцию обработки адреса, и неожиданно ломается поиск или переключение страниц. Визуально всё выглядит по-прежнему, но один из параметров больше не обрабатывается.

Для таких случаев не требуется сразу поднимать браузер и проходить весь сайт. Можно написать небольшой тест на Vitest. Он вызовет функцию с известными данными и проверит, что результат совпадает с ожидаемым.

Что стоит проверять в первую очередь

В Next.js есть код, который можно проверить отдельно от страницы. Например, преобразование параметров URL, фильтрация списка, форматирование дат или приведение ответа внешнего API к структуре приложения.

Возьмём простую функцию для номера страницы в каталоге. Из адреса /search?page=3 нужно получить число 3. Если параметр отсутствует, пустой или неверный, показываем первую страницу.

// src/lib/getPage.ts
export function getPage(value: string | null): number {
  if (!value) return 1;

  const page = Number(value);
  if (!Number.isInteger(page) || page < 1) return 1;

  return page;
}

Функция ничего не знает о React, браузере и сервере. Она получает строку и возвращает число. Поэтому её удобно тестировать без запуска всего приложения.

Устанавливаем Vitest

Добавим Vitest в зависимости для разработки.

npm install -D vitest

Рядом с функцией создадим файл getPage.test.ts.

// src/lib/getPage.test.ts
import { describe, expect, it } from "vitest";
import { getPage } from "./getPage";

describe("getPage", () => {
  it("читает номер страницы", () => {
    expect(getPage("3")).toBe(3);
  });

  it("возвращает первую страницу без параметра", () => {
    expect(getPage(null)).toBe(1);
  });

  it("не принимает ошибочный номер", () => {
    expect(getPage("abc")).toBe(1);
    expect(getPage("-2")).toBe(1);
    expect(getPage("2.5")).toBe(1);
  });
});

Теперь запустим проверку.

npx vitest run

Vitest выполнит тесты и сообщит, какие проверки прошли. describe объединяет их по функции, it описывает отдельный сценарий, а expect сравнивает результат с ожидаемым значением. Для этого теста дополнительная настройка React и DOM не нужна, поскольку мы проверяем обычную TypeScript-функцию.

Как тест помогает после изменения кода

Допустим, позже понадобится принимать номер страницы из другого источника, а кто-то заменит проверку на простое Number(value). Тогда пустое значение или некорректное число может начать обрабатываться иначе. Тесты покажут, какой сценарий изменился.

В этом и заключается смысл первого набора проверок. Мы сохраняем договорённость о поведении функции. Он не гарантирует отсутствие всех ошибок и не проверяет внешний API, но защищает конкретные правила от случайной поломки.

По мере развития приложения рядом появятся другие тесты. Можно проверять функцию, которая собирает параметры поиска, выбирает карточку из данных или решает, какие элементы показывать пользователю.

А как проверить страницу целиком

Vitest подходит для отдельных функций и многих компонентов React, но тестирование реального перехода по маршрутам и взаимодействия с браузером решает другую задачу. Здесь применяют инструменты вроде Playwright.

Например, unit-тест может проверить, что getPage("3") возвращает 3. А браузерный тест откроет страницу поиска с ?page=3, дождётся результатов и проверит, что интерфейс показывает третью страницу. Это разные уровни проверки, они дополняют друг друга.

Официальное руководство Next.js по Vitest описывает настройку тестов React-компонентов, когда одной проверки функций уже недостаточно.

Как тестирование встраивается в проект

В проекте с поиском, фильтрами и внешними данными небольшие функции появляются постоянно. Особенно это заметно, когда адрес страницы сам определяет состояние поиска, а сервер получает данные из стороннего источника. Разбор такой архитектуры есть в моей статье на Habr о поисковых URL в Next.js.

Курсовой проект EventMap показывает приложение для поиска событий, в котором соединены URL, внешнее API, авторизация, SEO и тестирование. В курсе «Next.js III: SEO, i18n 2026» Vitest используется для проверки отдельных функций, а Playwright и CI помогают проверить более широкий путь от разработки до деплоя.

Начните с функции, которую можно вызвать без страницы. Три проверки на обычных входных данных дадут основу для тестового контура, который будет расти вместе с приложением.