Tests Frontend — Vitest¶

Documentation des tests frontend avec Vitest et React Testing Library.

Configuration¶

Les tests Vitest sont configurés dans frontend/vite.config.ts et frontend/src/test/setup.ts.

make test-frontend              # Lance les tests
make test-coverage-frontend     # Avec couverture (LCOV + HTML)

Quoi tester côté frontend¶

Composant	Type de test	Focus
Composants UI	Render test	Affiche les bonnes données, répond aux events
Hooks React Query	Mock API	Retourne les bonnes données, gère les erreurs
Utils / helpers	Unit test	Transformations pures
Schémas Zod	Unit test	Validation des données

Test d'un composant¶

// components/features/game/GameCard.test.tsx
import { render, screen } from '@testing-library/react';
import { GameCard } from './GameCard';
import { createWrapper } from '@/test/utils';   // React Query + i18n wrapper

const mockGame = {
  id: 1,
  type: 'competitive',
  status: 'confirmed',
  scheduledAt: '2024-03-15T10:00:00Z',
  players: ['Alice', 'Bob', 'Charlie', 'David'],
};

describe('GameCard', () => {
  it('renders game details correctly', () => {
    render(<GameCard game={mockGame} />, { wrapper: createWrapper() });

    expect(screen.getByText(/Alice/)).toBeInTheDocument();
    expect(screen.getByText(/competitive/i)).toBeInTheDocument();
  });

  it('shows confirmed badge when status is confirmed', () => {
    render(<GameCard game={mockGame} />, { wrapper: createWrapper() });

    expect(screen.getByRole('badge', { name: /confirmé/i })).toBeInTheDocument();
  });
});

Test d'un schéma Zod¶

// hooks/useCreateGame.test.ts
import { createGameSchema } from '@/schemas/game';

describe('createGameSchema', () => {
  it('validates correct data', () => {
    const result = createGameSchema.safeParse({
      type: 'friendly',
      scheduledAt: new Date().toISOString(),
    });
    expect(result.success).toBe(true);
  });

  it('rejects invalid type', () => {
    const result = createGameSchema.safeParse({ type: 'invalid' });
    expect(result.success).toBe(false);
    expect(result.error?.issues[0].path).toContain('type');
  });
});