Overview

…
Then I remembered something @jessebaker said on Slack: maybe it's a dev vs. production build issue. That's it! 💫

I was able to confirm that testing the app after npm run build (and reverting my fix) doesn't present the issue! This is because there are no subsequent re-renders occurring for the InputBehaviors component in the production build. They happen in development mode thanks to our use of <StrictMode>, which helps us catch bugs by double rendering in development. That's exactly what happened here. The fix is still valid and necessary.

…

AFAICT we could've caught this automatically.

Proposed resolution

Add new cypress E2E debug CI job that's identical to the cypress E2E job, with two exceptions:

  1. it uses the debug build (npm run drupaldev, not npm run build)
  2. it does not run always, only when the UI is changed (and of course for the 0.x branch + manually)

User interface changes

None.

Issue fork experience_builder-3494513

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

wim leers created an issue. See original summary.

wim leers opened merge request !484

wim leers credited balintbrews.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » balintbrews
Status: Active » Needs review
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented 
$ npm run drupaldev
> vite-template-redux@0.0.0 drupaldev
> VITE_DRUPAL=true vite
  VITE v5.4.11  ready in 289 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

… oops, npm run drupaldev is long-running 😅

I'll let @balintbrews adjust that! 🤓

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » Unassigned
Status: Needs review » Closed (won't fix)

I think our end-to-end test coverage should be focused on the end user's experience. React's <StrictMode> is wonderful for development, and you're right that if it makes our app behave differently, that's most likely a bug. The kind of problems <StrictMode> potentially surfaces during development, we should fix and verify at the unit testing layer using Vitest, which we recently introduced in #3516390: Compile Tailwind CSS globally for code components.