React Tests 🚀 ReactMastery.Dev

Comment tester une application React

Module de la formation React Mastery. Module sur tests d'application React

Les prérequis

Les fondamentaux de React GitHub

Configuration requise

git v2.13 ou supérieure
NodeJS 12 || 14 || 15 || 16
npm v6 ou supérieure

Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont corretement installés et configuré vous pouvez executer :

git --version
node --version
npm --version

En cas de difficulté pour modifier la variable d'environnement PATH sur votre machine, vous pouvez consulter windows or mac/linux.

Installation

Si vous voulez modifier et commiter vos modification sur ce repo (notes etc ...), vous pouvez faire un fork sur votre github (au autre).

Après avoir installé et configuré les bonnes versions sur votre machine, vous pouvez executer cette commande pour pour demarrer la configuration du projet :

git clone https://github.com/MikeCodeur/react-testing.git
cd react-testing
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes d'environnement PATH

Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant le résultat de la console

Si le script de setup pose problème vous pouvez simplement executer les deux commandes suivantes :

npm install
npm run validate

Si vous maitriser Docker 🐳 vous pouvez démarrer le projet :

docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il est egalement possible de démarrer le projet sur Codesandbox.

Démarrer l'application

Pour demarrer l'application, exécuter:

npm start

L'application est basé sur react-create-app et react-scripts.

Vous pouvez aussi acceder au déploiement déploiement sur Netlify.

Executer les tests

npm test

Cela va démarrer Jest. Les tests sont là pour vous aider a atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and le test peut échouer car vous avez implémenter d'une manière différente.

Les exercices

src/exercise/00.md: Explications, Instructions de l'exercice, bonus
src/exercise/00.js: L'exercise avec des indications
src/__tests__/00.js: Tests
src/final/00.js: Version finale
src/final/00.bonus-0.js: Version finale avec bonus

Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but est de se poser les bonnes questions pour arriver au résultat.

Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨

Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis sont la pour vous aider sur différents aspects.

Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu dois faire.
Jack le Carnet de note 📝 va t'encourager à prendre des notes sur l'avancement
Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en cours de route).
Julia la roquette 🚀 te propulsera encore plus loin en te donnant des défis supplémentaires que tu peux relever dès que tu termines les exercices.
Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les meilleures pratiques et un lien pour pour me donner ton retour sur chaque module.
Dominic le Document 📑 te donnera des liens vers de la documentation utile
Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des trucs (supprimer le code)
Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests avec des explications potentielles pour lesquelles les tests échouent.