Tests avec React
Nous avons vu comment tester des fonctions pures, ce qui est la base des tests unitaires. Naturellement, la question suivante est : comment teste-t-on nos composants React, qui affichent une interface et gèrent un état ?
Tester un composant est un peu différent. L'objectif n'est pas de vérifier une valeur de retour, mais de s'assurer que le composant s'affiche correctement et réagit comme prévu aux interactions de l'utilisateur (un clic, le remplissage d'un formulaire, etc.).
Pour cela, l'écosystème s'appuie sur des bibliothèques comme @testing-library/react, qui permettent de simuler le rendu de vos composants dans un environnement de test et d'interagir avec eux.
La principale complexité vient de la gestion des mises à jour d'état qui sont souvent asynchrones. Pour garantir que vos tests attendent bien que le composant ait fini de se mettre à jour avant de vérifier le résultat, React fournit une fonction utilitaire essentielle : act().
Celle ci est souvent wrapper par d'autres utilitaires mis à disposition (user-event etc...).
Voici quelques ressources pour vous aider: