React Test Lab

Une application React de démonstration avec tests unitaires, documentation JSDoc et CI/CD automatisée via GitHub Actions.

Pré-requis

• Node.js 22.x ou supérieur
• pnpm (gestionnaire de paquets)

Pour installer pnpm :

npm install -g pnpm

Installation

Cloner le projet et installer les dépendances :

git clone [email protected]:YoannAuroyYnov/react-test-lab.git
cd react_test_lab
pnpm install

Exécuter l'application

Mode développement

pnpm start

L'application s'ouvrira automatiquement dans votre navigateur à l'adresse http://localhost:3000.

Build de production

pnpm build

Les fichiers optimisés seront générés dans le dossier build/.

Exécuter les tests

Tests unitaires et d'intégration (Jest + Testing Library)

pnpm test

Le rapport de couverture sera disponible dans le dossier coverage/.

Tests end-to-end (Cypress)

Dans un premier terminal, démarrez l'application :

pnpm start

Dans un second terminal, lancez Cypress en mode headless :

npx cypress run

Vous pouvez aussi utiliser l'interface graphique :

pnpm cypress

Mocks utilisés dans les tests

• Jest / Testing Library : axios est mocké dans les tests (par ex. App.test.js) pour contrôler les réponses de l'API /users et déclencher les chemins heureux ou d'erreur sans requêtes réseau réelles.
• Cypress : les appels HTTP sont interceptés avec cy.intercept (ex. cypress/e2e/navigation.cy.js) pour stubber GET /users et POST /users, simuler un premier chargement vide ou prérempli, et forcer un retour 201 lors de la création d'utilisateur. Cela rend les parcours E2E déterministes et rapides.

Documentation

Pour générer la documentation JSDoc :

pnpm jsdoc

La documentation sera générée dans public/docs/ et accessible à http://localhost:300/docs après le build.

Déploiement

Le projet est automatiquement déployé sur GitHub Pages via GitHub Actions lors d'un push sur la branche main.

URL de déploiement : https://yoannauroyynov.github.io/react-test-lab/

Publication npm

Le package est automatiquement publié sur npm via la CI/CD lors d'un push sur main :

• Vérification : La publication n'a lieu que si la version dans package.json est strictement supérieure à celle publiée sur npm
• Tag git : Un tag de version peut être créé manuellement avant le push

Package disponible sur npm : @yoann-86/react_test_lab

Publication Docker Hub

Lors du job CI docker-build-and-run, les images Docker migration_mysql et api_python sont construites puis publiées sur Docker Hub. Chaque image est poussée avec le tag latest ainsi qu'un tag de version basé sur la valeur version du package.json, ce qui permet d'utiliser soit la dernière image disponible, soit une version précise.

Configuration CI/CD - Note sur l'optimisation

⚠️ Important : La configuration CI/CD actuelle (parallélisation des jobs, caching pnpm, etc.) est explorée à titre éducatif. Sur un projet de cette taille, ces optimisations ne sont pas pertinentes en pratique.

Raison : Les temps incompressibles de démarrage des conteneurs Docker (cold start, allocation de ressources) sont bien supérieurs aux gains potentiels du caching (~30-60 secondes économisées vs ~10-30 secondes de démarrage). En d'autres termes, le surcoût du lancement des pods dépasse largement les bénéfices de l'optimisation.

Cette exploration reste utile pour :

• Comprendre les bonnes pratiques GitHub Actions
• Mettre en place une architecture scalable pour des projets plus volumineux
• Démontrer une approche professionnelle de la CI/CD