Тестування Next.js додатків

┌─────────────────────────────────────────────────────────┐
               │                        E2E ТЕСТИ                        │
               │                       (Playwright)                      │
               │            Наскрізні користувацькі сценарії             │
               │             Авторизація, Оформлення замовлення          │
               └────────────────────────────┬────────────────────────────┘
                                            │ покриває
               ┌────────────────────────────▼────────────────────────────┐
               │                  ІНТЕГРАЦІЙНІ ТЕСТИ                     │
               │                 (Vitest + RTL + MSW)                    │
               │            Компоненти зі складним станом                │
               │             Форми, Фільтри каталогу, Кошик              │
               └────────────────────────────┬────────────────────────────┘
                                            │ покриває
               ┌────────────────────────────▼────────────────────────────┐
               │                     МОДУЛЬНІ ТЕСТИ                      │
               │                (Vitest Environment Node)                │
               │        Server Actions, Схеми Zod, Чисті утиліти         │
               └────────────────────────────┬────────────────────────────┘
                                            │ базується на
               ┌────────────────────────────▼────────────────────────────┐
               │                    СТАТИЧНИЙ АНАЛІЗ                     │
               │            TypeScript (tsc --noEmit) + ESLint           │
               └─────────────────────────────────────────────────────────┘

pnpm add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event msw

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules/', '.next/', '**/*.d.ts'],
    },
  },
});

import '@testing-library/jest-dom';
import { beforeAll, afterEach, afterAll } from 'vitest';
import { server } from './src/mocks/server';

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { Button } from './Button';

describe('Компонент Button', () => {
  it('коректно відображає текст та реагує на клік', async () => {
    const user = userEvent.setup();
    const handleClick = vi.fn();

    render(<Button onClick={handleClick}>Надіслати заявку</Button>);

    const button = screen.getByRole('button', { name: /надіслати заявку/i });
    expect(button).toBeInTheDocument();

    await user.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('блокує натискання у стані disabled', async () => {
    const user = userEvent.setup();
    const handleClick = vi.fn();

    render(<Button onClick={handleClick} disabled>Заблоковано</Button>);

    const button = screen.getByRole('button', { name: /заблоковано/i });
    expect(button).toBeDisabled();

    await user.click(button);
    expect(handleClick).not.toHaveBeenCalled();
  });
});

import { vi } from 'vitest';

export function setupNavigationMock(overrides = {}) {
  const pushMock = vi.fn();
  const replaceMock = vi.fn();
  const refreshMock = vi.fn();

  vi.mock('next/navigation', () => ({
    useRouter: () => ({
      push: pushMock,
      replace: replaceMock,
      refresh: refreshMock,
      prefetch: vi.fn(),
      back: vi.fn(),
      ...overrides,
    }),
    usePathname: () => '/dashboard',
    useSearchParams: () => new URLSearchParams('page=1&sort=desc'),
  }));

  return { pushMock, replaceMock, refreshMock };
}

import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('https://api.agenticlab.dev/v1/user/profile', () => {
    return HttpResponse.json({
      id: 'usr-1',
      name: 'Олександр Тімлід',
      role: 'ADMIN',
    });
  }),

  http.post('https://api.agenticlab.dev/v1/analytics', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ received: body }, { status: 201 });
  }),
];

import { type Page, type Locator, expect } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel(/email/i);
    this.passwordInput = page.getByLabel(/пароль/i);
    this.submitButton = page.getByRole('button', { name: /увійти/i });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, pass: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(pass);
    await this.submitButton.click();
  }

  async expectError(message: string) {
    await expect(this.errorMessage).toContainText(message);
  }
}

import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

test.describe('Сценарій авторизації користувача', () => {
  test('успішний вхід перенаправляє в особистий кабінет', async ({ page }) => {
    const loginPage = new LoginPage(page);

    await loginPage.goto();
    await loginPage.login('[email protected]', 'CorrectPassword123!');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByRole('heading', { level: 1 })).toHaveText('Панель керування');
  });

  test('відображає помилку при невірних облікових даних', async ({ page }) => {
    const loginPage = new LoginPage(page);

    await loginPage.goto();
    await loginPage.login('[email protected]', 'WrongPassword!');

    await loginPage.expectError('Невірний логін або пароль');
    await expect(page).toHaveURL('/login');
  });
});