Upgrading React

[zarahzachz]

Jira ticket: WNMGDS-1714

tldr; Due to the lack of new features, migrating to React 17 will be easier, but not effortless.

Should we upgrade to React 17 or to 18?

The design system currently uses React 16 and the latest version of React is 18. Given that the design system is now two versions behind, which version of React should the design system migrate towards if we migrate at all?

React 17 represents a turning point for the React framework and was released to make upgrading other new releases easier. This version has no new features, but does have several breaking changes as part of its release.

Conversely, React 18 does introduce new features. But given React 17 exists to make migrating to future versions of React easier, you'd need to do the work to get to React 17 before implementing 18 anyways.

I only know of one team that's migrating to React 18 (SCOUT - and they migrated to 17 first), while a handful have recently migrated to React 17. The rest are on React 16 (though it's if/when they're planning on migrating).

React 17

As stated above, React 17 doesn't introduce any new features and was a relatively painless update.

I was able to build and run our Gatsby and Storybook sites without issue and components using third party libraries (Tooltip, Modal, Autocomplete) continued to work as expected.

The biggest issue I discovered comes from how our tests are set up. Our design system uses a combination of React Testing Library (RTL) and Enzyme and the changes made to React's API break our testing setup.

In general, we'll need to pay attention to how we test our onBlur and onFocus functions. We have some components that manually change the focus for accessibility reasons and the API update in React 17 deprecates these event listeners in favor of the more browser-correct events focusin and focusout.

As a result of this update (and other API changes), older versions of RTL will not work. It's also worth noting newer versions of RTL aren't compatible with 17 either. So the sweet spot for RTL is @testing-library/react <=12.1.5.

Enzyme is the biggest issue as it no longer supports the new React releases and appears to have no roadmap to do so. An adapter for 17 was made by a lone dev, but that dev is begging people to drop Enzyme altogether since their work wasn't intended to support the whole of the React 17+ community.

Given the lack of official support from Enzyme for React 17+, and the amount of unit tests we have in place using it, there will be a considerable effort to get our tests updated to support any future version of React.

From a testing standpoint, I was able to yarn link our design system to flh-consumer (they use React 16) and ran their unit tests to see if consuming teams on older versions of React would have any problems. The only test failures came from the outdated Button API, so it seems the version change had no impact on them.

React 18

Given the recommendation to migrate to 17, I didn't do too much in terms of testing/exploration for this version.

I read React 18 was backwards compatible with older versions of React (though didn't test this myself).

React 18 works best with RTL @testing-library/react >=13+.

React 18 also offers new features that could be of benefit to a design system:

• Automatic batching groups multiple state updates in single pre-render for better perf
• The new hook useId could replace our unique ID method from lodash

Summary

Migrating to any version of React 17+ will be an issue for our current unit testing setup and an effort will be required to lift these tests up to work with whatever version of React our team chooses to migrate towards.

It's also worth noting that as of React 17, you can now perform gradual upgrades (though they don't advise it as a long-term solution), so if updating our tests is too large an effort, we could possibly institute this gradual update solution.

From a personal perspective, migrating to 17 seems like a necessity that will make it easier to update React in the future. React 18 doesn't feel as significant/necessary at this time.

[pwolfert]

@zarahzachz, thank you for doing this analysis! Could you compile a list of testing modules that are still on Enzyme and will need to be migrated to RTL? Next steps will be creating tickets for all the steps needed to upgrade to React 17.

[zarahzachz]

Sure thing. Going to post the full list here:

• Accordion (mount, shallow)
• AccordionItem (mount)
• Autocomplete (mount, shallow)
• Choice (shallow)
• DateInput (mount, shallow)
• DrawerToggle (shallow) - Enzyme import was commented out on this for some reason? May serve as template for RTL migration
• Dropdown (mount, shallow)
• FilterChip (shallow)
• FormControl (mount, shallow)
• FormLabel (shallow)
• HelpDrawerToggle (shallow) - Could this component be deprecated? Does this warrant having its own test?
• InlineError (mount, shallow)
• Mask (mount, shallow)
• MonthPicker (mount, shallow)
• Page (shallow)
• Review (shallow)
• ReviewLink (shallow)
• SkipNav (shallow)
• Spinner (shallow)
• Step (shallow)
• StepLink (shallow)
• StepList (shallow)
• SubStep (shallow)
• Select (mount, shallow)
• Tab (shallow)
• Tabs (mount, shallow)
• TabPanel (shallow)
• Table (mount, shallow)
• TableBody (mount)
• TableCaption (mount)
• TableCell (mount)
• TableHead (mount)
• TableRow (mount)
• TextField (mount, shallow)
• VerticalNav (mount, shallow)
• VerticalNavItem (mount, shallow)
• VerticalNavItemLabel (shallow)

[pwolfert]

💯, thanks!

[pwolfert]

That's so many!

[zarahzachz]

[pwolfert]

I thought we had made a lot more progress on slowly migrating to RTL than we have, I guess.