Tester votre App ReactJS, c’est (plus) simple

Si vous avez déjà écrit des tests fonctionnels pour vos applications, vous devez être familier de “Selenium”. Si ce n’est pas le cas, ce n’est pas bien grave, puisque cet outil n’est bientôt qu’un mauvais souvenir (et tous les faux positifs qui vont avec !).

En effet, un nouvel outil, tout beau tout neuf, vient de sortir et il faut avouer que sur le papier ça donne envie :

  • il n’utilise pas du tout Selenium. Son architecture est complètement différente.
  • Il est performant / rapide.
  • Il vient avec une boite à outils complète, pas besoin d’installer 10 autres paquets.
  • Il y a la possibilité de faire des voyages dans le temps.
  • Vu son architecture, pas besoin de mettre des “wait” partout, ni même de promise.
  • Il est open source et peut-être installé localement.

Cet outil s’appelle

Rendez-vous https://www.cypress.io/

Bref, maintenant vous allez pouvoir écrire des tests fonctionnels très rapidement et les exécuter de manière encore plus rapide. Je vous laisse vous débrouiller avec ça pour le moment, mais sachez que si vous commencez à utiliser des “wait”, vos tests ne seront absolument pas fiables !

Une fois avoir écrit des tests, les jouer en local c’est bien, mais les jouer sur vos serveurs d’intégration continue c’est mieux ! Pour ma part, j’utilise CircleCI et je n’ai absolument pas à me plaindre. Un des avantages aussi : j’utilise l’image Docker que je souhaite. Et devinez quoi ? Cypress en a mis une a dispo pour avoir tout ce qu’il faut.

Voilà mon config.yml complet pour CircleCI :

On récupère une image docker en node 8 avc toutes les dépendances Cypress. On configure quelques steps, et on run les tests. Ici, c’est une WebApp ReactJS initialisée avec CRA, donc :

  • on la build avec npm run build-web (un de mes alias vers node node_modules/react-scripts/scripts/build.js) ;
  • on lance l’application sur le port 5000 (port par défaut) avec serve ;
  • ensuite on attend grâce à wait-on que le port 5000 soit bien occupé (sinon il se peut que les tests commencent avant même que le serveur ne soit lancé) ;
  • on run les tests avec cypress run.

Après, les artifacts permettent juste d’avoir les screenshots et les vidéos des tests afin de pouvoir les analyser si ceux-ci venaient à échouer.

Voilà, vous n’avez plus aucune excuse pour ne pas écrire de tests fonctionnels.

PS : OK j’abuse avec Selenium, surtout depuis qu’ils ont sorti leur version NodeJS etc. D’ailleurs, si vous êtes coincé avec, voici un très bon article sur le sujet : https://medium.freecodecamp.org/how-to-write-reliable-browser-tests-using-selenium-and-node-js-c3fdafdca2a9

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.