Upgrade to React 18

[alexvuong]

Description

This PR upgraded React to version 18, and Chakra version 2 and any related library to be compatible with React 18. The list of upgraded package includes:

• React 18.2.0
• React-dom 18.2.0
• "@types/react": "^18.2.0",
• "@types/react-dom": "^18.2.1",
• "@testing-library/react": "^14.0.0",
• "@testing-library/user-event": "^14.4.3",
• "@chakra-ui/icons": "^2.0.19",
• "@chakra-ui/react": "^2.6.0",
• "@chakra-ui/skip-nav": "^2.0.15",
• "@chakra-ui/system": "^2.5.6",
• "react-hook-form": "^7.43.9",
• "framer-motion": "^4.1.17",

The following packages are removed as the peerDependencies are not <= React 17

• @testing-library/render-hooks
• @wojtekmaj/enzyme-adapter-react-17

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• HydrateRoot API has changed. We cant pass callback function as we are doing. Instead, we can pass a prop into the Component to have it called after it is created. See here
• Fix hydration error by creating a utils function to use window.HYDRATING. See here
• React hook form v7
  • errors object has been moved into formState object. see here
  • render prop will return an object which contains field and fieldState. See here
• For unit tests changes:
  • There is a bug in a dependency of a dependency, nswapi, which is a dependency of jest-environment-jsdom that is not compatible with Chakra 2. It will throw an error ':disabled):not([disabled]' is not a valid selector on some of the tests that has Modal. Solution: we use npm 8, and add overrides to enforce the version of nwsapi package to 2.2.2, and we have to drop npm 7 support
  • UserEvent actions are now async action, it will always return promise , and we have to call setup before using it

import userEvent from '@testing-library/user-event
test('mytest' async () => {
     const user = userEvent.setup()
     render(<Component />)
     
     
    await  user.click(screen.getByText(/something/i)
})

How to Test-Drive This PR

• npm ci at root
• Start up Retail App
• Smoke test the app, and make sure it behaves as usual

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[alexvuong]

we need to enforce this package in Retail App for the tests in generated project to pass. This should only affect unit tests, and not impact product code

[kevinxh]

i wish json support comments

[alexvuong]

I created a util function to allow us to append mock request handler into global.server mock to reduce code verbosity, but I haven't applied it to all the mock we have in tests, only a few that I fixed in this PR. We can refactor those as we see fit.

[alexvuong]

As in React testing library v14.0.0, all the user actions are async, and it requires calling setup before performing user actions. To avoid repetitive setup, we can set it up here, right before rendering the test component, and return it along with render results, so the test can perform the user actions without having to call setup.

test('some test", async () => {
  const {user} = renderWithProvider(<Comp />

  await  user.click(screen.getByText*/some text/i) 
})

[adamraya]

Small comments on the enzyme work

[adamraya]

If we want to be consistent with the previous testing, note that now we're missing testing the lang attribute in the HTML tag.

[alexvuong]

Thanks for catching that, it has been addressed, see 2f69f6a#diff-cd330e53513b04d5b7e6fabbf75f8df0aed7f3b684c5019f7a416ff1bc0f65e6R46

[adamraya]

We're missing this test.

[alexvuong]

We intentionally removed this test since React Testing library do not focus on the prop type, rather than focus on what components are rendering, and we want to see on the DOM.

[adamraya]

The description mentions the usage of setProps enzyme API, but we no longer use that API.

[alexvuong]

ah thanks for catching that, in enzyme, setProps is used to trigger prop change on a test component, in React testing library, we can do the same trick by using rerender method returned from the first time we render the component

[bfeister]

Let's discuss / resolve @adamraya 's comments and then we can merge

[bfeister]

Thanks for resolving all the comments. Great work! 🏅 LGTM! 🚀