yext / search-ui-react / 7975579334

88%

main: 86%

push

github

Support React 18 (#423)

The following changes were made to support React 18:
- Updated `react` and `react-dom` dev dependency versions from 17.0.2 to 18.2.0
- Updated peer dependencies to allow React 18
- Updated `react-collapsed` from v3.6.0 to v4.1.2 which supports React 18
- Copied `@reach/auto-id`'s `useId` hook  with minor modifications from https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/reach-auto-id.ts. Because the peer dependencies of that library don't allow React 18, we weren't able to install it directly anymore. This `useId` hook uses React 18's  `useId` hook if it's present and otherwise falls back to custom logic for React 16 and 17.
- Added a new `renderPin` prop to `MapboxMap` to allows React 18 users to render custom JSX into the DOM node for the marker element. This gets around the issue of having to call `createRoot` from `react-dom/client` in `MapboxMap`. This was causing issues on React 16/17 sites because Vite and Webpack were unable to determine that the dynamic import of `react-dom/client` wouldn't be reachable, and tried to resolve the package unsuccessfully. Rather than force existing consumers of the repo to update their bundler config to exclude `react-dom/client`, we provide this optional prop to React 18 users if they want to use React 18 features in their custom pin component, or if they don't want to get the console warning about using `ReactDOM.render` if they use the `PinComponent` prop.

To support testing in React 18:
- We are now fetching TextEncoder from utils when setting up the test environment because the new react-dom does not have it
- `@testing-library/react-hooks` doesn't support React 18 and it's functionality has now been added to `@testing-library/react` in v14. Because of this, `@testing-library/react` was upgraded to v14.2.1, which only supports React 18, and `@testing-library/react-hooks` was removed from the dev dependencies. The GitHub workflow for testing React 16 and 17 ... (continued)

1293 of 1686 branches covered (76.69%)

Branch coverage included in aggregate %.

1867 of 2014 relevant lines covered (92.7%)

149.07 hits per line