[DEPR]: Enzyme

[adamstankiewicz]

Proposal Date

2023-05-31

Target Ticket Acceptance Date

2023-06-16

Earliest Open edX Named Release Without This Functionality

Quince - 2023-10

Rationale

Enzyme was largely the tool of choice for most JS tests throughout the Open edX platform until React testing-library came out, which afforded developers a simpler way to write tests that more closely resembled how the web pages are used in practice by largely not relying on internal implementation details of the component. See https://testing-library.com/docs/guiding-principles/ for more details about testing-library's philosophy.

However, while most new tests being written throughout Open edX are using React testing-library, there stills exists a large number of Enzyme tests. Having these tests around would usually not be an issue, but it has recently come to our attention that Enzyme is no longer maintained; its maintainers and the community have publicly mentioned there are no plans to create a React 18 adapter for Enzyme. See more details here: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl

While it does not have any immediate impact on Open edX given it is largely running either React 16 and/or 17, Enzyme's lack of support for React 18 will impact and block an imminent upgrade to React 18 in the future.

Removal

Any repository which intends to upgrade to React 18 will need to remove its usage of Enzyme throughout its test suites. These Enzyme tests may be refactored using the suggestions made below.

Replacement

We recommend the use of React testing library and/or react-test-renderer.

Existing tests that rely on Enzyme will need to be refactored to use an alternative like React testing-library prior to any attempts to upgrade to React 18.

Deprecation

Stub: we may be able to include build-time deprecation warnings within @edxfrontend-build to detect when a consuming MFE is using Enzyme based on whether it's installed in the MFE's package.json file.

Migration

Incremental migration is acceptable. Open edX is currently running React 16 in most places, but React 17 in a handful of others. Once React 18 becomes more imminent, refactoring away from Enzyme will become more important to not become a blocker for a future React 18 upgrade.

Additional Info

• https://discuss.openedx.org/t/deprecation-removal-enzyme-public-engineering-195/10259

Outstanding Issues

Beta Give feedback

1. Replace enzyme with React Testing Library frontend-component-cookie-policy-banner#440
   maintenance +1
   
2. Drop the use of Enzyme from our Frontend Testing edx-platform#35245
   maintenance needs maintainer attention +2
   

Issues

Beta Give feedback

1. Migrate away from Enzyme tests in favor of React Testing Library wg-frontend#166
   epic maintenance +2
2. Move tests to RTL frontend-app-learner-dashboard#263
   1 of 1
   +0
3. Remove enzyme which blocks React 18 upgrade frontend-app-library-authoring#166
   1 of 1
   +0
4. Migrate tests from enzyme to react-testing-library paragon#2325
   0 of 1
   engineering epic maintenance raccoon-gang +4
   

PRs

Beta Give feedback

1. docs: deprecate enzyme open-edx-proposals#487
   +0
2. docs: adr that outlines tools for enzyme migration open-edx-proposals#501
   +0
   
3. refactor: depreciate enzyme frontend-app-authn#1128
   +0
4. fix: Migrate common components tests to RTL frontend-app-authn#1117
   +0
5. fix: Migrate forgot password and reset password tests to RTL frontend-app-authn#1115
   +0
6. fix: Migrate Registration tests to RTL frontend-app-authn#1122
   +0
7. fix: Migrate welcome page and recommendations tests to RTL frontend-app-authn#1116
   +0
8. refactor: convert login page tests from enzyme to react testing library frontend-app-authn#1123
   +0
9. feat: migrate enzyme to rtl frontend-app-learner-portal-programs#297
   +0
10. feat: migrated tests from enzyme to RTL frontend-app-program-console#160
    +0
    
11. feat: migrate enzyme to react-unit-test-utils frontend-app-learner-dashboard#276
    +0
12. feat: migrate enzyme to edx/react-unit-test-utils frontend-app-ora-grading#295
    +0
    
13. feat: migrate enzyme to react-unit-test-utils frontend-app-gradebook#378
    +0
    
14. feat: migrated tests from enzyme to RTL frontend-app-library-authoring#397
    +0
15. feat: migrated tests from enzyme to RTL frontend-app-profile#941
    +0
    
16. feat: migrate enzyme to RTL frontend-app-payment#844
    +0
17. feat: migrate enzyme to rtl frontend-app-learner-portal-enterprise#915
    +0
18. feat: migrate enzyme to RTL frontend-app-admin-portal#1164
    +0
    
19. chore: remove unused enzyme package frontend-app-ecommerce#359
    +0
    
20. feat: add style-dictionary to tech radar as provisional, deprecate Enzyme openedx-tech-radar#19
    +0
21. feat: migrate enzyme to our react-unit-test-utils frontend-lib-content-components#450
    +0
    
22. feat: migrate enzyme to RTL and react-unit-test-utils frontend-app-course-authoring#770
    +0
    
23. feat: migrate enzyme with RTL frontend-platform#615
    +0
24. feat: migrate enzyme with RTL frontend-component-header#439
    +0
    
25. feat: migrate enzyme with RTL frontend-app-account#945
    +0
    
26. feat: migrate enzyme with RTL frontend-component-footer#372
    +0
27. chore: move autosuggest tests from Enzyme to RTL paragon#2611
    released released on @alpha +2
28. [BD-46] feat: move Enzyme to React testing library #2440 paragon#2581
    blended released released on @alpha +3
29. Replace enzyme with React Testing Library frontend-component-ai-translations#18
    +0
30. frontend-app-publisher
31. frontend-app-support-tools
32. frontend-app-admin-portal

[jesperhodge]

@adamstankiewicz before we merge this, I would love to add more guidance here on how to migrate away from enzyme. I would like to amend the "Replacement" section with something like this:

"Replacing an enzyme test with react-testing-library means rewriting a lot of code. Thus, for existing tests that you don't want to completely rewrite, we recommend using @muselesscreator 's https://github.com/muselesscreator/react-unit-test-utils as a wrapper for react-test-renderer that can for the most part act as a drop-in-replacement for enzyme without too much work.

For new tests, we recommend using react-testing-library at least partially. It allows you also to test multiple components together, test behavior as it appears to users in the browser, and test stateful components, which is not supported by react-test-renderer."

[arbrandes]

@Syed-Ali-Abbas-Zaidi, I notice you've been doing this migration accross a few MFEs. Do you see any PRs missing from the list in the description? Are you aware of any MFEs or libraries where the migration hasn't been done, yet?

[Syed-Ali-Abbas-Zaidi]

@Syed-Ali-Abbas-Zaidi, I notice you've been doing this migration accross a few MFEs. Do you see any PRs missing from the list in the description? Are you aware of any MFEs or libraries where the migration hasn't been done, yet?

List of MFEs that still need to be migrated:

1. frontend-app-publisher
2. frontend-app-support-tools
3. frontend-app-admin-portal
4. frontend-app-cookie-policy-banner

[dianakhuang]

@arbrandes What is the current status of this? Should we move it into 'removing'?

[dianakhuang]

Since it seems like this is not active and the owners are not being responsive, we're going to move this back into 'Proposed'

edit: Rescinding previous comment since @feanil took ownership of it.

[MaxFrank13]

Thanks for bringing this back to life. Not being on React 18 is forcing us to stay on version 12 of React Testing Library. We even had a couple PRs with dependency conflicts get merged by renovate:

• Update PR in Learner Record (revert PR)
• Update PR in Profile (revert PR)

[feanil]

@MaxFrank13 can you provide some more info, it sounds like your repos are already on React Testing Library and so your issues are unrelated to enzyme? Maybe I missed something?

[MaxFrank13]

Yes you're right. It's not directly related. It's just that deprecating Enzyme helps clear the way for React 18, and until then, we have to stay on React Testing Library v12 (the latest is v16). Other than Renovate merging those PRs with conflicts, this isn't really causing problems other than preventing us from staying up to date.

The only issue I've been able to find that is referencing React 18 upgrades is one for the React 17 upgrade in platform-roadmap, and this Enzyme deprecation issue. Perhaps I'm not looking in the right places or maybe the work just hasn't been prioritized yet.

Worth noting that Enzyme isn't the only blocker for React 18. We'd still need to upgrade other FE dependencies/peerDependencies in places like frontend-platform and frontend-build to support React 18. And perhaps that's why work on this issue was paused?

[feanil]

It sounds like what you actually care about is tracking openedx/platform-roadmap#277 which you're right is not currently being lead/in-progress anymore.

My recommendation is that if there are specifics preventing upgrades in repos you care about to create issues in those repos about the specific upgrades that need to happen and to work with the maintainers to plan/take-on that work. If you need help with that please let me know but it sounds like your issue is more that "We're not on react 18 yet in learner record and profile" but the root cause of that is not the fact that those repos are still running "Enzyme" but some other blocker or just scheduling the work to do the upgrade.

[MaxFrank13]

Ahh thanks for the suggestion. I think I incorrectly assumed that upgrades to frontend-platform and frontend-build were also waiting on the deprecation of Enzyme. I see now that technically that shouldn't be the case.