Description formation Tests FrontEnd
Assurer la fiabilité d’une application frontend passe aujourd’hui par une stratégie de tests
robuste
et
bien maîtrisée. Cette formation vous propose d’adopter les bons réflexes pour tester
efficacement
vos interfaces web, depuis la logique métier jusqu’aux parcours utilisateurs les plus
critiques.
Vous apprendrez à concevoir des tests automatisés pertinents, maintenables et alignés sur
les besoins
réels de votre projet. Grâce à un accompagnement progressif, mêlant théorie, bonnes pratiques et
mises en situation concrètes, vous serez en mesure d’intégrer le test dans votre quotidien de
développement.
En fonction de vos besoins, il est possible de personnaliser en amont certaines
parties de la formation pour s'adapter à votre stack technique (React, Vue, Angular) ainsi qu'aux
outils de test utilisés dans votre contexte (par exemple : Vitest pour les TU, Playwright pour les
tests E2E, etc.).
Objectifs pédagogiques
- 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é
Programme formation Tests FrontEnd
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
Modalités d'accueil
Formez-vous au framework Angular et créez des applications web dynamiques et complexes.
Fondamental
Avancé
