203 lines
4.7 KiB
Markdown
203 lines
4.7 KiB
Markdown
# 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:**
|
|
```typescript
|
|
// ❌ Incorrect
|
|
vi.mock('@/hooks/useToast', () => ({
|
|
useToast: vi.fn(() => ({
|
|
toast: vi.fn(),
|
|
})),
|
|
}));
|
|
```
|
|
|
|
**Solution:**
|
|
```typescript
|
|
// ✅ 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:**
|
|
```typescript
|
|
// ❌ Incorrect
|
|
render(<Component />);
|
|
```
|
|
|
|
**Solution:**
|
|
```typescript
|
|
// ✅ 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
|
|
|
|
```typescript
|
|
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
|
|
|
|
```typescript
|
|
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
|
|
```bash
|
|
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
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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
|
|
|