veza/docs/archive/frontend-sessions-2026/GUIDE_CORRECTION_TESTS.md

Guide de Correction des Tests qui Échouent

Date: 2025-01-27
Objectif: Corriger systématiquement les 163 fichiers de tests qui échouent

---

🔍 Problèmes Communs Identifiés

1. Mock useToast Incorrect

Symptôme: showError is not a function

Problème:

// ❌ Incorrect
vi.mock('@/hooks/useToast', () => ({
  useToast: vi.fn(() => ({
    toast: vi.fn(),
  })),
}));

Solution:

// ✅ Correct
const mockShowSuccess = vi.fn();
const mockShowError = vi.fn();

vi.mock('@/hooks/useToast', () => ({
  useToast: vi.fn(() => ({
    success: mockShowSuccess,
    error: mockShowError,
    toast: vi.fn(), // Optionnel pour compatibilité
  })),
}));

Fichiers affectés: ~10-15 fichiers

---

2. React Router Context Manquant

Symptôme: Cannot destructure property 'basename' of React__namespace.useContext(...) as it is null

Problème:

// ❌ Incorrect
render(<Component />);

Solution:

// ✅ Correct - Option 1: Utiliser customRender
import { render } from '@/test/test-utils';

render(<Component />); // customRender inclut déjà Router

// ✅ Correct - Option 2: Wrapper manuel
import { BrowserRouter } from 'react-router-dom';
import { render } from '@testing-library/react';

render(
  <BrowserRouter>
    <Component />
  </BrowserRouter>
);

Fichiers affectés: ~20-30 fichiers

---

3. WebSocket Mock Incomplet

Symptôme: realWebSocket.addEventListener is not a function

Solution: Déjà corrigé dans src/test/setup.ts - MockWebSocket inclut maintenant addEventListener, removeEventListener, dispatchEvent

Fichiers affectés: Tests utilisant WebSocket

---

4. Context Manquants (ToastContext, AuthContext, etc.)

Symptôme: Cannot read property 'X' of undefined

Solution: Utiliser customRender de test-utils.tsx qui inclut tous les Contexts nécessaires

import { render } from '@/test/test-utils';

// customRender inclut automatiquement:
// - BrowserRouter
// - QueryClientProvider
// - ToastProvider
render(<Component />);

Fichiers affectés: ~30-40 fichiers

---

5. Mocks API Manquants

Symptôme: Network Error ou 404 Not Found dans les tests

Solution: Ajouter handlers MSW appropriés dans le test

import { server } from '@/mocks/test-setup';
import { rest } from 'msw';

beforeEach(() => {
  server.use(
    rest.get('/api/tracks', (req, res, ctx) => {
      return res(ctx.json({ tracks: [] }));
    })
  );
});

Fichiers affectés: ~50-60 fichiers

---

🛠️ Processus de Correction

Étape 1: Identifier les Erreurs

npm test -- --run 2>&1 | grep -E "(Error|failed|Cannot|TypeError)" > test-errors.log

Étape 2: Catégoriser les Erreurs

• Grouper par type d'erreur (useToast, Router, Context, etc.)
• Identifier les fichiers affectés

Étape 3: Corriger par Catégorie

1. useToast - Corriger tous les mocks useToast d'abord
2. Router - Ajouter BrowserRouter/customRender
3. Context - Utiliser customRender
4. Mocks API - Ajouter handlers MSW

Étape 4: Vérifier

npm test -- --run

---

📋 Checklist de Correction

Pour chaque fichier de test qui échoue:

• Vérifier si le test utilise customRender de test-utils.tsx
• Si non, remplacer render par customRender ou wrapper avec Router
• Vérifier si le mock useToast retourne { success, error }
• Si non, corriger le mock
• Vérifier si le composant utilise React Router (Link, useNavigate, etc.)
• Si oui, s'assurer que Router est présent (via customRender ou wrapper)
• Vérifier si le test nécessite des mocks API
• Si oui, ajouter handlers MSW appropriés
• Exécuter le test individuellement pour vérifier
• Répéter pour tous les tests du fichier

---

🚀 Script Automatique

Un script scripts/fix-failing-tests.sh a été créé pour automatiser certaines corrections:

cd apps/web
./scripts/fix-failing-tests.sh

Note: Le script fait des corrections automatiques mais certaines nécessitent une vérification manuelle.

---

📊 Progression

Corrections Appliquées

• ✅ Mock useToast corrigé dans PlaylistBatchActions.test.tsx
• ✅ Router ajouté dans TrackSearch.test.tsx
• ✅ Mock WebSocket amélioré dans setup.ts
• ✅ Helpers créés dans test-utils.tsx et mocks.ts

À Faire

• ⏳ Corriger ~160 fichiers restants selon les patterns identifiés

---

🎯 Objectif

Avant:

• ❌ 163 fichiers de tests échouent
• ❌ 683 tests échouent

Après:

• ✅ 0 fichiers de tests échouent
• ✅ 0 tests échouent

---

Dernière mise à jour: 2025-01-27