Skip to content

Draft: Upgrade React to v18

Axel Bocciarelli requested to merge react-18 into master

The upgrade worked, and I was able to switch to the new createRoot API: https://reactjs.org/docs/react-dom-client.html#createroot

I bumped a couple of deps to get rid of some peer dep warnings, but there are still plenty. Many of the React libraries used in daiquiri are no longer actively maintained: react-beautiful-dnd, react-bootstrap-table-next, etc.

What I did not manage to upgrade fully is @testing-library/react: it works fine without bumping to the latest, but we get warnings in the tests telling us to switch to the new createRoot API. When I do, everything breaks... This release is the culprit: https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0,

In H5Web, I really struggled with this, and it was mostly due to Suspense. Basically, I had to wait explicitly for every suspended component to finish loading (or rather for every Suspense loading fallback to disappear), and the challenge was that I couldn't do this sequentially as the components could finish loading in different orders. I came up with this: https://github.com/silx-kit/h5web/blob/upgrade-react/packages/app/src/test-utils.tsx#L79-L83 -- I set a data-testid starting with "Loading" on every loading fallback element (even empty spans when I don't need visible loading indicators) and then wait for all those fallback elements to disappear. (If needed, I can explain why data-testid and waitFor, why it works even in tests that use fake timers, etc.)

Not sure if Suspense is also the problem here, it's hard to tell. I don't have enough knowledge of the app and the way the tests are run to be able to figure it out myself. If I upgrade to the latest and set the legacyRoot flag, it's better but I still get a couple of failing tests -- also, it seems to defeat the purpose anyway.

I also did not manage to upgrade fully @testing-library/user-event. I gained a few versions, but got stuck on https://github.com/testing-library/user-event/releases/tag/v13.1.0 because of pointer-events. I've seen at least one test fail because it's trying to click on an element with pointer-events: none (or an element with a parent with pointer-events: none). Again, not enough knowledge to decide if the fix is to force the click or rethink the test.

Edited by Axel Bocciarelli

Merge request reports