feat: Upgrade React from 17.0.2 to 18.3.1 in Feast UI (#4620)

Also update related packages to better work with React 18.

userEvent usage is updated to call `setup()` first and await all
interactions so that the DOM updates before continuing with the test,
according to e.g.
https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent.

Signed-off-by: Harri Lehtola <[email protected]>

ui/package.json

@@ -11,8 +11,8 @@
   "peerDependencies": {
     "@elastic/eui": "^95.12.0",
     "@emotion/react": "^11.13.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@elastic/eui": {
@@ -33,7 +33,7 @@
     "protobufjs": "^7.1.1",
     "query-string": "^7.1.1",
     "react-code-blocks": "^0.0.9-0",
-    "react-query": "^3.34.12",
+    "react-query": "^3.39.3",
     "react-router-dom": "<6.4.0",
     "react-scripts": "^5.0.0",
     "tslib": "^2.3.1",
@@ -82,18 +82,19 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.1.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
     "msw": "^0.36.8",
     "protobufjs-cli": "^1.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",

ui/src/FeastUISansProviders.test.tsx

@@ -65,9 +65,9 @@ test("full app rendering", async () => {
   });
 });
 
-const leftClick = { button: 0 };
-
 test("routes are reachable", async () => {
+  const user = userEvent.setup();
+
   render(<FeastUISansProviders />);
 
   // Wait for content to load
@@ -89,10 +89,7 @@ test("routes are reachable", async () => {
 
     const routeRegExp = new RegExp(routeName, "i");
 
-    userEvent.click(
-      screen.getByRole("button", { name: routeRegExp }),
-      leftClick
-    );
+    await user.click(screen.getByRole("button", { name: routeRegExp }));
 
     // Should land on a page with the heading
     screen.getByRole("heading", {
@@ -107,13 +104,15 @@ const featureViewName = spec.name!;
 const featureName = spec.features![0]!.name!;
 
 test("features are reachable", async () => {
+  const user = userEvent.setup();
+
   render(<FeastUISansProviders />);
 
   // Wait for content to load
   await screen.findByText(/Explore this Project/i);
   const routeRegExp = new RegExp("Feature Views", "i");
 
-  userEvent.click(screen.getByRole("button", { name: routeRegExp }), leftClick);
+  await user.click(screen.getByRole("button", { name: routeRegExp }));
 
   screen.getByRole("heading", {
     name: "Feature Views",
@@ -122,12 +121,12 @@ test("features are reachable", async () => {
   await screen.findAllByText(/Feature Views/i);
   const fvRegExp = new RegExp(featureViewName, "i");
 
-  userEvent.click(screen.getByRole("link", { name: fvRegExp }), leftClick);
+  await user.click(screen.getByRole("link", { name: fvRegExp }));
 
   await screen.findByText(featureName);
   const fRegExp = new RegExp(featureName, "i");
 
-  userEvent.click(screen.getByRole("link", { name: fRegExp }), leftClick);
+  await user.click(screen.getByRole("link", { name: fRegExp }));
   // Should land on a page with the heading
   // await screen.findByText("Feature: " + featureName);
   screen.getByRole("heading", {

ui/src/components/ProjectSelector.test.tsx

@@ -25,6 +25,8 @@ afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 test("in a full App render, it shows the right initial project", async () => {
+  const user = userEvent.setup();
+
   render(<FeastUISansProviders />);
 
   const select = await screen.findByRole("combobox", {
@@ -54,7 +56,7 @@ test("in a full App render, it shows the right initial project", async () => {
 
   // Do the select option user event
   // https://stackoverflow.com/a/69478957
-  userEvent.selectOptions(
+  await user.selectOptions(
     // Find the select element
     within(topLevelNavigation).getByRole("combobox"),
     // Find and select the Ireland option

ui/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { QueryClient } from "react-query";
 import FeastUI from "./FeastUI";
 
@@ -91,7 +91,8 @@ const tabsRegistry = {
   ],
 };
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+root.render(
   <React.StrictMode>
     <FeastUI
       reactQueryClient={queryClient}
@@ -106,6 +107,5 @@ ReactDOM.render(
           })
       }}
     />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

ui/src/test-utils.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, RenderOptions } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { QueryParamProvider } from "use-query-params";
 import { MemoryRouter as Router } from "react-router-dom";
 import RouteAdapter from "./hacks/RouteAdapter";
 
 interface ProvidersProps {
-  children: React.ReactElement;
+  children: React.ReactNode;
 }
 
 const queryClient = new QueryClient();
@@ -27,7 +27,7 @@ const AllTheProviders = ({ children }: ProvidersProps) => {
 
 const customRender = (
   ui: React.ReactElement,
-  options?: Record<string, unknown>
+  options?: Omit<RenderOptions, 'wrapper'>
 ) => render(ui, { wrapper: AllTheProviders, ...options });
 
 // re-export everything