Тестирование: основы

Автоматический тест — код, который сам проверяет, что другой код работает: нажимает кнопку и сравнивает результат с ожидаемым. Для приложения Next.js обычно используют два вида тестов: модульные (unit) проверяют отдельный компонент или функцию, сквозные (end-to-end, E2E) открывают настоящий сайт в браузере и проходят сценарий целиком.

Установка Vitest

Vitest — быстрый инструмент для модульных тестов, вместе с ним ставят библиотеку Testing Library для отрисовки компонентов:

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths

Создайте файл настроек в корне проекта:

// vitest.config.mts
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';
 
export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: { environment: 'jsdom' },
});

jsdom имитирует браузер внутри Node.js, а tsconfigPaths учит Vitest понимать пути вида @/lib/posts. Добавьте в package.json скрипт "test": "vitest".

Тест компонента

Проверим кнопку «Нравится» из урока о клиентских компонентах. Файл теста лежит рядом с компонентом:

// components/LikeButton.test.tsx
import { fireEvent, render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import LikeButton from './LikeButton';
 
test('счётчик растёт при нажатии', () => {
  render(<LikeButton />);
  const button = screen.getByRole('button');
 
  fireEvent.click(button);
 
  expect(button.textContent).toBe('Нравится: 1');
});

render рисует компонент, screen.getByRole находит кнопку так, как её нашёл бы пользователь, fireEvent.click нажимает. Запустите npm test — в терминале появится зелёная отметка у теста «счётчик растёт при нажатии».

Сквозной тест в Playwright

Асинхронные серверные компоненты Vitest отрисовать не умеет. Их проверяют сквозными тестами в настоящем браузере:

npm init playwright@latest

Команда установит Playwright, браузеры и создаст папку для тестов. Тест для блога:

// e2e/posts.spec.ts
import { expect, test } from '@playwright/test';
 
test('со списка открывается статья', async ({ page }) => {
  await page.goto('http://localhost:3000/posts');
  await page.getByRole('link', { name: 'Привет, Next.js' }).click();
 
  await expect(page.getByRole('heading', { level: 1 })).toHaveText('Привет, Next.js');
});

Запустите сайт командой npm run dev, а в другом терминале — npx playwright test. Playwright откроет /posts, нажмёт на ссылку и проверит заголовок статьи.

Что чем проверять

Частая ошибка

Писать тест Vitest для async-страницы, например render(<PostsPage />). Тест упадёт с ошибкой: Testing Library не поддерживает асинхронные серверные компоненты. Выносите логику в обычные функции и тестируйте их в Vitest, а страницу целиком проверяйте в Playwright.