[FOLIO-3876] Poppy 2023 R2 - BREAKING upgrade react to v18 Created: 26/Jun/23 Updated: 30/Nov/23 Resolved: 25/Oct/23 |
|
| Status: | Closed |
| Project: | FOLIO |
| Components: | None |
| Affects versions: | None |
| Fix versions: | None |
| Type: | Epic | Priority: | TBD |
| Reporter: | Zak Burke | Assignee: | Unassigned |
| Resolution: | Done | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original estimate: | Not Specified | ||
| Issue links: |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Epic Name: | react 18 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Sprint: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Development Team: | None | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Release: | Poppy (R2 2023) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Description |
|
Summary: Upgrade react to v18, including tests, test infrastructure (in the case of BTOG) and possible updates to component code. THIS IS A BREAKING CHANGE. Details: Update react and its related packages in package.json with the commands such as the following: yarn add -D react@^18.2.0 react-dom@^18.2.0 @folio/stripes-cli@^3.0.0 @folio/eslint-config-stripes@^7.0.0 yarn add -P react@^18.2.0 react-dom@^18.2.0 @folio/stripes@^9.0.0 Updating the lower range of a peer-dependency is a breaking change, so you must increment your package-version to its next major version (e.g. if the current version is 7.1.0 then update to 8.0.0; if the current version is 6.0.0 then update to 7.0.0). You may need to update individual @folio/stripes-* packages as well. The versions that correspond to @folio/stripes v9.0.0 are: "@folio/stripes-components": "~12.0.0", "@folio/stripes-connect": "~9.0.0", "@folio/stripes-core": "~10.0.0", "@folio/stripes-final-form": "~8.0.0", "@folio/stripes-form": "~9.0.0", "@folio/stripes-smart-components": "~9.0.0", "@folio/stripes-util": "~6.0.0", If you use Jest/RTL: A good option is to depend on and import from jest-config-stripes v2 to leverage centralized configuration and dependencies (example PR). Although this involves changing the import paths in all your tests, the following code-mod will fix up @testing-library imports within your ./src directory:
grep -rl testing-library ./src | xargs perl -pi -e 's/\@testing\-library/\@folio\/jest-config-stripes\/testing-library/g'
Alternatively, if you want to continue to maintain the infrastructure yourself, the versions that correspond to react v18 are: "@jest/globals": "^29.6.1", "@testing-library/dom": "^9.3.1", "@testing-library/react": "^14.0.0", "babel-jest": "^29.6.1", "jest": "^29.6.1", "jest-environment-jsdom": "^29.6.1", "jest-junit": "^16.0.0", Note that some functions have changed/moved (e.g. waitFor), and the functionality of @testing-library/react-hooks has been folded directly into @testing-library/react. If you still use BTOG: note that @bigtest/react is not compatible with react v18. If your test helpers import from stripes-core's setup-application, they should continue to work when you update stripes-core to v10; otherwise you will have to make some adjustments to mount components and visit URLs (example PR). |
| Comments |
| Comment by Ann-Marie Breaux (Inactive) [ 28/Jul/23 ] |
|
Hi Zak Burke Just to confirm - does this work need to be done in Poppy, or can it wait until Quesnelia? |
| Comment by Zak Burke [ 28/Jul/23 ] |
|
Ann-Marie Breaux, this is required for Poppy. We've been talking about it for a while and posted to Slack#stripes-updates about the plan back on June 13 so hopefully teams were already anticipating it. |
| Comment by Tino Ryll [ 15/Aug/23 ] |
|
Hi Zak Burke, I was wondering if you could provide a bit more insight into the reasons behind changing the import paths. From my perspective, things seem to be functioning smoothly without altering the import paths. |
| Comment by Zak Burke [ 16/Aug/23 ] |
|
Tino Ryll, you're correct that things will continue "functioning smoothly without altering the import paths" but yarn lint should complain loudly because those import paths won't match up with the packages listed in deps and dev-deps. Without changing the paths, you're directly importing a package that is only transitively imported via dependencies. Imagine, for example, that instead of directly depending on lodash, you figured, "Hey, redux-form already depends on it so I can just use it. That'll work now, but if redux-form refactored to avoid lodash then you'd suddenly be out of luck. |