Upgrading to React 17

[eatyourgreens]

Next 11 came out in June, and requires React 17 as a minimum. I've opened #2281 for the upgrade.

React 17 was released in October 2020 and adds no new features to React. It's a stepping stone, intended to make it easier to gradually upgrade to future versions of React. React 18 was announced a couple of weeks ago, and does include changes that we're probably going to need for SSR. 18 is out in alpha now, so that library authors can work on upgrades.

We use enzyme to test React components. An enzyme adapter for React 17 was started in August 2020 (when React 17 was first released) but is still in development. The enzyme adapter is the work of a single person, and they have publicly asked for help to complete it. In the interim, an unofficial adapter is available. The developer of the unofficial adapter has said that their adapter will only be supported until the official adapter is available. They are also working on the PR to release an official adapter.

I've used the unofficial React 17 adapter in #2281, but opened this discussion to talk about whether we continue to use enzyme, or move to another testing library eg. React Testing Library.

[eatyourgreens]

visx are having a similar discussion: airbnb/visx#872

[srallen]

Can the focus of this discussion be specifically on what it would take to migrate away from Enzyme and what the alternatives are? The issue isn't upgrading React 17. We know we need and want to do that. The issue is the waning support of Enzyme and the impact that is having on test writing and support.

[eatyourgreens]

It can. That's why I've linked to the visx discussion of whether they're going to stick with enzyme. (TLDR: they'll move to RTL for tests that are broken in enzyme.)

[srallen]

This seems more like a stop gap rather than a resolution to me. Something that could be done in a migration to something else as it doesn't really address the maintenance concerns of the project.

[eatyourgreens]

Well, they do need to ship support for React 17 and enzyme is blocking that.
airbnb/visx#872 (comment)

[srallen]

Ok, so let's be focused on what we want to do.

The options as it seems to me is going to be:

• chai for just doing assertions on functions (already doing)
• react test utils for unit testing on react components as needed (which is already available to us with react-dom)
• react-testing-library for rendered output and behavior testing on react components

In the past a strategy we've tried to do is write new things with the new library or tool and swap over old things when we need to make edits, but I think that usually results in a hybrid that never gets finished. What I'm going to suggest since many (all?) of us are wrapping up development cycles on certain feature sets right now is to have a focus week on just doing a conversion from enzyme to react-testing-library, see how far we get, and then evaluate how to go from there: maybe schedule another maintenance focus week with the whole team in the near future or swap to the gradual approach.

[shaunanoordin]

Since #2281 has been merged & deployed due to an urgent security fix, how do we archive this discussion, or set it as resolved? (I see "lock conversation" and "delete discussion" in the menu.)

For those just coming in to this thread, since the last on 14 Jul...

• We've tested and added react-testing-library to FEM
• A lot of existing FEM components still use Enzyme, but Enzyme is going to be gradually phased out in favour of RTL
  • There's also some progress on the Enzyme adapter recently, so that's good too?
• We've upgraded to React 17 and Next.js 11.1

[srallen]

I think the discussion title is a misnomer. This discussion really is about enzyme to RTL migration, so with that scope, I'd like to keep it "open" so to speak because I think the adapter issue is still unresolved and I hope to do another maintenance week in the coming weeks where we might get a sense for pacing of the migration. The initial week we did focusing on this was mostly about learning, so not a good measure for work pace.

[eatyourgreens]

Visx officially supports React 17 now, so we should probably upgrade. airbnb/visx#1268

[eatyourgreens]

React 18 is out of beta now, and the createRoot API can't be used with Enzyme.
https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl

This gives a useful overview of the background and context.
https://www.piotrstaniow.pl/goodbye-enzyme

There's an interesting quote from Rachel Nabors, in that article. Maybe we should discourage class components in new code?

Class components are going to be around for years to come—for example, there are tens of thousands in production at Facebook already. However, we do recommend that new apps be built with function components and Hooks, which is why we want those docs front and center. The class component docs will remain available for folks working with those components, and class components themselves might one day be spun out into their own package—but if that did happen, we're provide migration scripts to automate that transition :)