Use React Testing Library instead of Enzyme

[ChristopherChudzicki]

We should stop using Enzyme and use React Testing Library (RTL; @testing-library/react) instead.

Why ditch Enzyme / Why React Testing Library

There are lots of articles on this. I like Time to Say Goodbye—Enzyme.js. Here's a summary

1. "It has a long record of falling behind changes in React, preventing people from transitioning to newer React versions" In particular, Enzyme is still stuck on React 16; React 17 was released almost two years ago, and React 18 more recently. We use 16 now, but we may want to update.

2. "It relies on React internal implementation, and React team discourages using it". In particular:

   I think it’s worth noting that if you can use a project like React Testing Library that doesn’t depend on React internals, it’s generally a good idea. At FB we’ve frozen Enzyme tests to stay on an old version of React that won’t be upgraded for this reason, and we banned using it in any new tests.

   from Dan Abramov (redux creator; co-creator of create-react-app)

3. RTL is officially recommended by React for testing for react.

4. RTL tests resemble user interaction better (no shallow rendering; tests the DOM not components)

How to switch

Most of our frontend tests rely on a helper class, IntegrationTestHelper. In #1274 I wrote a new version of this (with almost identical API as the old) that uses RTL and Jest instead of Enzyme and Sinon, and re-wrote one test file as a proof of concept. So... Let's do that more.

[sr-shifu]

Hey guys, doing deprecation of Enzyme in my project, I figured out there is a way to make this process more manageable and automated: https://thesametech.com/migrate-away-from-enzyme/

Please check out my article, and let me know what you think! I plan to work on my plugin and improve it further, for now, it's a beta version.

[ChristopherChudzicki]

@sr-shifu Thanks for sharing—neat idea to use ESLint to manage the process. I hope to take a closer look soon!