Cypress test failed with hydration issue

[m-maillot]

Lorsque l'on utilise cypress, on a une erreur d'hydratation lorsque l'on utilise react-dsfr. Cela fait planter les tests.

J'ai utilisé le projet de démo pour reproduire, c'est dispo ici : https://github.com/m-maillot/react-dsfr-next-appdir-demo/tree/cypress-failure

Pour info, voici l'erreur obtenue :

[ddecrulle]

Bonjour,

Merci pour le report. Es-tu sûr que cette erreur est causée par react-dsfr ? Il y a une issue similaire sur le dépot de cypress

[m-maillot]

En effet, cela ne se produit qu'avec react-dsfr mais également que dans l'environnement de cypress. Je n'ai pas l'erreur en dev.

Je suis tombé sur ce repo : https://github.com/JehanneDussert/admin-portal/blob/main/web/app/layout.tsx#L27

J'ai reproduit le hack sur mon repo d'exemple et ça ne reproduit plus l'erreur. Après, on peut aussi désactiver ces erreurs.
Je vais continuer d'investiguer car ce serait dommage de ne pas pouvoir tester avec cypress nos sites utilisant nextjs + react-dsfr.

[garronej]

Salut @m-maillot,

Es-ce que tu peut produire les commandes précisent pour reproduire.
Je n'utilise pas Cypress

[m-maillot]

Sur la branche m-maillot/react-dsfr-next-appdir-demo@cypress-failure

Il faut lancer les commandes :

yarn dev & yarn cypress:open

Tu as l'écran cypress qui s'ouvre et tu cliques sur E2E Testing :

Ensuite du sélectionne le browser et tu cliques sur Start E2E testing

Tu cliques ensuite le home.spec.ts

et là on peut voir que ça failed

Et si tu cliques sur les 2 errors, tu peux voir l'erreur que j'ai mis dans l'issue.

[garronej]

Merci @ddecrulle pour avoir trouvée la bonne issue.

@m-maillot J'ai publier une nouvelle version 1.11.6, vous n'aurez plus le probilème.

PS: Ce n'etais pas un bug de react-dsfr, j'ai pu contourner le problème mais le problème viens de Cypress.

[m-maillot]

Merci ! Ca marche bien sur l'exemple mais pas sur notre code... on doit avoir autre chose qui bloque. Je vais essayer d'investiguer et reproduire notre cas dans un exemple.

[m-maillot]

Salut @garronej !

Avec la nouvelle version, on a l'erreur d'hydratation même en prod.
Sur la page https://code-du-travail-numerique-maxgfr-dsfr-header-3yalj0ue.ovh.fabrique.social.gouv.fr/stats, quand on regarde la console, on voir l'erreur d'hydratation.
Sans le Suspense, on ne l'avait pas. Elle n'était présente que sur les tests avec Cypress. Je pense que le Suspense apporte une régression ici.

[garronej]

Bonjour @m-maillot,

Désolé pour la régression.
Il s'agit probablement d'une nouvelle erreur d'hydratation, cette fois-ci probablement causée par Sentry.
Pour nous aider à résoudre ce problème, pourriez-vous créer un dépôt de reproduction de l'erreur, ou à minima fournir les étapes précises pour la reproduire ? Nous nous engageons à corriger cela rapidement.

Ce qui est un peu frustrant, c'est que le bug ne vient pas de react-dsfr, mais des outils satellites (Cypress, Sentry) qui transgressent les règles établies. Nous sommes contraints de composer avec leurs hacks pour que tout fonctionne correctement, mais cela devrait être la responsabilité de ces outils de ne pas casser l'application de leurs utilisateurs...

[garronej]

I rolled back the fix for now

[m-maillot]

Merci ! Je vais essayer de reproduire sur la démo. Si ça vient de Sentry, je vais essayer de l'ajouter pour le reproduire.

[garronej]

Super @m-maillot, merci pour ton aide pour améliorer react-dsfr