Investigate how difficult it would be to upgrade to React 17 or 18

[claireholt-tw]

Business Context

Our current React version is 16.1, which is several years behind the most recent version. This makes us hard to use newer features like the MUI X Data Grid. We want to look into seeing how difficult it would be to upgrade our React version.

Definition of Done

We're able to give a rough estimate of how complex upgrading would be. We'll also know which packages have breaking changes that will require updating.

Timebox

1 Day

Acceptance Criteria

Do research/play around and answer:

• [x] Is there possible tech solution library? Name and link to documentation
  • Unofficial adapter for React 17 for Enzyme
• [x] What are the advantages and disadvantages?
  • refer to the ADR linked below
• [x] Is the value add worth it?
  • refer to the ADR linked below
• [x] How difficult is implementation?
  • refer to the ADR linked below
• [x] Record your findings in form of documentation(markdown or ADR)
  • https://impactworkers.github.io/iw-complaint-manager/adrs/adr-007
• [x] Present/deskcheck your findings.
• [x] If approved write down the steps in a new Story Card

  • 607

Notes:

N/A

[claireholt-tw]

Option 1: Upgrade from React 16 to React 18 (the latest version)

• We'd need to upgrade MUI from v4 to v5 (another major change)
• You can't use Enzyme tests with React 18. We have about 80 test files that use Enzyme, and we'd have to change all of these to use React Testing Library instead.

Client Tests - 97/299 Fail, we suspect about 80 of these fails are from Enzyme testing library

Server tests: 9/220 Failed, all with the same error message:

Pact client tests pass, pact server test failed.

Option 2: Upgrade from React 16 to React 17

• Still doesn't get us totally up to date, but will allow us to use MUI Data Grid for the officer view

[rd-huerta]

Client test results:

7/299 failed Compared to 97/299 failures when using React 18

Server test results

Initially they failed: We re-ran the failing tests and they passed:

Pact Client Test Results

Pact Server Test Results

[rd-huerta]

Recommendations

• Upgrade to React 17

  • Fix 7 failing tests from client tests

• Long term goal: upgrade to React 18

  • add new card for test refactoring to the backlog: switch from enzyme to RTL

    [!TIP] Once we get rid of enzyme tests, it will be easy for us to upgrade to React v.18