Upgrade to React 17

[claireholt-tw]

User Story

As a developer I want to upgrade complaint manager to React 17 So that I can use new tools and libraries like MUI X Data Grid.

Context

As a result of the conclusion drawn from this spike, we need to upgrade to React 17. In order to do this, we'll need to update the following:

• react from 16 to 17
• react-dom from 16 to 17
• enzyme-adapter-react-16 to enzyme-adapter-react-17

We know this change will cause a handful of tests to fail (about 9), and we will need to investigate & fix those tests. A few of the failing tests are associated with the RichTextEditor component, and we suspect that React Quill is the problem & might need updating.

For more details, see the comment section of the spike linked above.

Definition of Done

Complaint manager uses React 17 across the app with no failing tests or breaking changes.

Acceptance Criteria

Given complaint manager upgrades to React 17 When I rebuild and run all tests Then the app works, the build works, and no tests fail.

[rd-huerta]

test-output.txt

[paul-thompson1]

I managed to update the following packages:

• @wojtekmaj/enzyme-adapter-react-17
• react-dom@17
• react@17

Note: We are still updating packages

The following are detected warnings when using the app:

• A <label> isn't associated with a form field. To fix this issue, nest the <input> in the <label> or provide a for attribute on the <label> that matches a form field id.

• Unload event listeners are deprecated and will be removed.

• A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form. To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.

• Warning: Each child in a list should have a unique "key" prop. (DataDashboard.js:95)

• Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

• Uncaught (in promise) URIError: URI malformed

• ./node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

• Material-UI: The value provided to Autocomplete is invalid. None of the options match with {"label":"","value":""}. You can use the getOptionSelected prop to customize the equality test.

I was able to build and run the app: (react version in console)

[paul-thompson1]

We have 33 tests failing so far.

Potential reasons for failing tests:

• UseEffect changes from React 16 to React 17
• react-quill changes
• Way tests were written

[paul-thompson1]

The tests that are failing are problematic in the way they were originally written. Here's an example test from EditReferralLetter.test.js

test("open cancel dialog and not save edits when clicking logout", () => {
    history.push("/logout");

    expect(wrapper.find("[data-testid='dialog-cancel-button']")).toHaveLength(
      0
    );

    expect(dispatchSpy).not.toHaveBeenCalledWith(editReferralLetterContent());

    const input = wrapper.find("Quill").first();
    input.props().onChange("testing");

    history.push("/logout");
    wrapper.update();

    const cancelEditLetterDialog = wrapper
      .find("[data-testid='dialog-cancel-button']")
      .first();
    expect(cancelEditLetterDialog.length).toEqual(1);
  });

[CwoodsTW]

Currently stuck on this output in the OfficerHistories.Test file. Andrew alluded to enzyme not caring about mocked components returning nothing. RTL may be stricter. Tried updating the component with some conditional logic to return null but it still failed.