Formation Tests FrontEnd - Les fondamentaux

• Comprendre et choisir la bonne stratégie de tests
• Savoir tester unitairement des composants et fonctions JS/TS
• Savoir mocker des dépendances
• Savoir écrire et maintenir des tests E2E robustes
• Savoir tirer parti de l'outillage autours des tests dans un processus industrialisé

Module 1
Comprendre les tests frontend et leurs enjeux
Pourquoi tester ?
Pyramide de tests & stratégie de couverture
Unitaire vs intégration vs e2e
Coût, maintenance, rapidité
Tests frontend spécifiques
DOM, événements, async, mocks, accessibilité, visual testing
Gestion de l’état (store, props, contextes)
Bonnes pratiques
Tests isolés, lisibles, maintenables
CI/CD et automatisation
Tour d'horizon du test frontend : Jest, Vitest, Testing Library, Cypress, Playwright, MSW…

Module 2
Tests unitaires frontend avec Vitest
Présentation de Vitest
Configuration, comparaison avec Jest, rapidité, intégration TS/Vite
Fichiers de test, commandes, coverage
Tester des fonctions pures
Tests simples
Test aux limites
Property based testing
Tester des composants UI avec Testing Library
Render, queries (getByText, findByRole, etc.), events, assertions
Tests async (await, timers, useEffect…)
Exemple avec un composant formulaire
Mocking
Mock de modules (fetch, axios, etc.), timers, hooks custom
Mock de stores (Pinia, Vuex, Zustand...)
Spécificités avec votre framework: Angular | Vue | React (au choix)
Coverage & intégration CI
Rapport de couverture
Seuils
GitHub Actions
Structurer les tests dans un projet réel
Convention de nommage
Dossiers
Isolation logique
Module 3
Tests end-to-end avec Playwright
Présentation de Playwright
Comparaison avec Cypress, Puppeteer
Navigation, multibrowser, auto-waiting, screenshots
Installation et configuration
Playwright Test Runner
Browsers (Chromium, Firefox, WebKit), headless mode
Structure d’un test E2E
Page model, navigation, assertions, fixtures
Sélecteurs robustes, rôles, accessibilité
Scénarios utilisateur courants
Login / logout
Formulaires, validation, erreurs serveur
Navigation, composants dynamiques
Screenshots, vidéos, debug interactif
Mock d’API avec Playwright
Route interception
Fixtures
Réponses simulées
Spécificités avec votre framework : Angular | Vue | React (au choix)
Tests parallèles & configuration CI
CI GitHub
Tests par navigateur
Reporting