Visitar URL original
feat: Upgrade React from 17.0.2 to 18.3.1 in Feast UI (#4620) · robhowley/feast@24d7ae9 · GitHub
Skip to content

Commit 24d7ae9

Browse files
peruukkirobhowley
peruukki
authored and
robhowley
committed
feat: Upgrade React from 17.0.2 to 18.3.1 in Feast UI (feast-dev#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 <peruukki@hotmail.com>
1 parent 559c3c9 commit 24d7ae9

6 files changed

Lines changed: 169 additions & 146 deletions

File tree

‎ui/package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"peerDependencies": {
1212
"@elastic/eui": "^95.12.0",
1313
"@emotion/react": "^11.13.3",
14-
"react": "^17.0.2",
15-
"react-dom": "^17.0.2"
14+
"react": "^17.0.2 || ^18.0.0",
15+
"react-dom": "^17.0.2 || ^18.0.0"
1616
},
1717
"peerDependenciesMeta": {
1818
"@elastic/eui": {
@@ -33,7 +33,7 @@
3333
"protobufjs": "^7.1.1",
3434
"query-string": "^7.1.1",
3535
"react-code-blocks": "^0.0.9-0",
36-
"react-query": "^3.34.12",
36+
"react-query": "^3.39.3",
3737
"react-router-dom": "<6.4.0",
3838
"react-scripts": "^5.0.0",
3939
"tslib": "^2.3.1",
@@ -82,18 +82,19 @@
8282
"@rollup/plugin-json": "^4.1.0",
8383
"@rollup/plugin-node-resolve": "^13.1.3",
8484
"@rollup/plugin-typescript": "^8.3.1",
85-
"@testing-library/jest-dom": "^5.14.1",
86-
"@testing-library/react": "^12.0.0",
87-
"@testing-library/user-event": "^13.2.1",
85+
"@testing-library/dom": "^10.4.0",
86+
"@testing-library/jest-dom": "^6.5.0",
87+
"@testing-library/react": "^16.0.1",
88+
"@testing-library/user-event": "^14.5.2",
8889
"@types/d3": "^7.1.0",
8990
"@types/jest": "^27.0.1",
9091
"@types/node": "^16.7.13",
91-
"@types/react": "^17.0.20",
92-
"@types/react-dom": "^17.0.9",
92+
"@types/react": "^18.3.11",
93+
"@types/react-dom": "^18.3.0",
9394
"msw": "^0.36.8",
9495
"protobufjs-cli": "^1.0.2",
95-
"react": "^17.0.2",
96-
"react-dom": "^17.0.2",
96+
"react": "^18.3.1",
97+
"react-dom": "^18.3.1",
9798
"rimraf": "^3.0.2",
9899
"rollup": "^2.68.0",
99100
"rollup-plugin-copy": "^3.4.0",

‎ui/src/FeastUISansProviders.test.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ test("full app rendering", async () => {
6565
});
6666
});
6767

68-
const leftClick = { button: 0 };
69-
7068
test("routes are reachable", async () => {
69+
const user = userEvent.setup();
70+
7171
render(<FeastUISansProviders />);
7272

7373
// Wait for content to load
@@ -89,10 +89,7 @@ test("routes are reachable", async () => {
8989

9090
const routeRegExp = new RegExp(routeName, "i");
9191

92-
userEvent.click(
93-
screen.getByRole("button", { name: routeRegExp }),
94-
leftClick
95-
);
92+
await user.click(screen.getByRole("button", { name: routeRegExp }));
9693

9794
// Should land on a page with the heading
9895
screen.getByRole("heading", {
@@ -107,13 +104,15 @@ const featureViewName = spec.name!;
107104
const featureName = spec.features![0]!.name!;
108105

109106
test("features are reachable", async () => {
107+
const user = userEvent.setup();
108+
110109
render(<FeastUISansProviders />);
111110

112111
// Wait for content to load
113112
await screen.findByText(/Explore this Project/i);
114113
const routeRegExp = new RegExp("Feature Views", "i");
115114

116-
userEvent.click(screen.getByRole("button", { name: routeRegExp }), leftClick);
115+
await user.click(screen.getByRole("button", { name: routeRegExp }));
117116

118117
screen.getByRole("heading", {
119118
name: "Feature Views",
@@ -122,12 +121,12 @@ test("features are reachable", async () => {
122121
await screen.findAllByText(/Feature Views/i);
123122
const fvRegExp = new RegExp(featureViewName, "i");
124123

125-
userEvent.click(screen.getByRole("link", { name: fvRegExp }), leftClick);
124+
await user.click(screen.getByRole("link", { name: fvRegExp }));
126125

127126
await screen.findByText(featureName);
128127
const fRegExp = new RegExp(featureName, "i");
129128

130-
userEvent.click(screen.getByRole("link", { name: fRegExp }), leftClick);
129+
await user.click(screen.getByRole("link", { name: fRegExp }));
131130
// Should land on a page with the heading
132131
// await screen.findByText("Feature: " + featureName);
133132
screen.getByRole("heading", {

‎ui/src/components/ProjectSelector.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ afterEach(() => server.resetHandlers());
2525
afterAll(() => server.close());
2626

2727
test("in a full App render, it shows the right initial project", async () => {
28+
const user = userEvent.setup();
29+
2830
render(<FeastUISansProviders />);
2931

3032
const select = await screen.findByRole("combobox", {
@@ -54,7 +56,7 @@ test("in a full App render, it shows the right initial project", async () => {
5456

5557
// Do the select option user event
5658
// https://stackoverflow.com/a/69478957
57-
userEvent.selectOptions(
59+
await user.selectOptions(
5860
// Find the select element
5961
within(topLevelNavigation).getByRole("combobox"),
6062
// Find and select the Ireland option

‎ui/src/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import ReactDOM from "react-dom";
2+
import { createRoot } from "react-dom/client";
33
import { QueryClient } from "react-query";
44
import FeastUI from "./FeastUI";
55

@@ -91,7 +91,8 @@ const tabsRegistry = {
9191
],
9292
};
9393

94-
ReactDOM.render(
94+
const root = createRoot(document.getElementById("root")!);
95+
root.render(
9596
<React.StrictMode>
9697
<FeastUI
9798
reactQueryClient={queryClient}
@@ -106,6 +107,5 @@ ReactDOM.render(
106107
})
107108
}}
108109
/>
109-
</React.StrictMode>,
110-
document.getElementById("root")
110+
</React.StrictMode>
111111
);

‎ui/src/test-utils.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
2-
import { render } from "@testing-library/react";
2+
import { render, RenderOptions } from "@testing-library/react";
33
import { QueryClient, QueryClientProvider } from "react-query";
44
import { QueryParamProvider } from "use-query-params";
55
import { MemoryRouter as Router } from "react-router-dom";
66
import RouteAdapter from "./hacks/RouteAdapter";
77

88
interface ProvidersProps {
9-
children: React.ReactElement;
9+
children: React.ReactNode;
1010
}
1111

1212
const queryClient = new QueryClient();
@@ -27,7 +27,7 @@ const AllTheProviders = ({ children }: ProvidersProps) => {
2727

2828
const customRender = (
2929
ui: React.ReactElement,
30-
options?: Record<string, unknown>
30+
options?: Omit<RenderOptions, 'wrapper'>
3131
) => render(ui, { wrapper: AllTheProviders, ...options });
3232

3333
// re-export everything

0 commit comments

Comments
 (0)