Configure des tests Ts + WebComponents

CovidTrackerFr / vitemadose-front

Interface utilisateur de l'outil ViteMaDose

https://vitemadose.covidtracker.fr

Other

80 stars 51 forks source link

Configure des tests Ts + WebComponents #151

Closed Floby closed 3 years ago

Floby commented 3 years ago

fixes #23

Pour lancer des tests :

npm test

Petit apérçu du résultat :)

Très fortement inspiré par cet article https://matthias-kainer.de/blog/posts/testing-webcomponents-with-jest-and-dom-testing-tools/

Le pipeline de compilation/transformation est différent selon qu'on teste ou qu'on build mais l'intégration officielle entre jest est vite est un sujet chaud (https://github.com/vitejs/vite/issues/1955).

J'ai choisi testing-library parce que de mon experience, ça permet de faire des tests suffisamment indépendants de l'implémentation pour pouvoir refacto tranquillement. Un effet de bord appréciable est que ça rend le code plus accessible car les assertions se base sur l'arbre d'accessibilité du navigateur (enfin jsdom ici).

fcamblor commented 3 years ago

Super propres les tests !

J'attends de merger #142 pour la merger mais c'est top !

joffreyBerrier commented 3 years ago

Hello @Floby dis moi, comment tu as fait pour ne pas avoir ce genre d'erreur avec jest ?

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.

Floby commented 3 years ago

haha ^^ j'ai caché les import.meta dans du code qui n'est pas parsé pendant les tests :D

Floby commented 3 years ago

en fait import.meta pose 2 problèmes

pour une raison que j'ignore la compilation TS pendant le run Jest ne comprends pas qu'il est bien en target es2020. Je suppute que c'est lié au runtime jest (node) qui ne supporte pas officiellement ces formats.
même avec un // @ts-ignore bien placé, on bypass le truc, ce qui permet de récupérer les types définis dedans
mais quand on veut utiliser des fonctions qui sont définie dans un fichier avec du import.meta alors c'est le runtime (node) qui nous dit qu'il ne supporte pas la syntaxe en dehors d'un module.

Après import.meta.env c'est du spécifique au build vitejs donc je serai pour faire en sorte que ça n'apparaisse pas dans le code en dehors du build ou de la config de prod.