Upgrade to React 18

Author: briangleeson

index.jsx

@@ -13,7 +13,7 @@ limitations under the License.
 /* istanbul ignore file */
 
 import { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { defaultQueryFn } from './src/api/utils';
@@ -23,7 +23,7 @@ import App from './src/containers/App';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 5, // 5 minutes
       queryFn: defaultQueryFn,
       refetchOnWindowFocus: false,
       retry: false,
@@ -34,11 +34,12 @@ const queryClient = new QueryClient({
 
 setTheme();
 
-ReactDOM.render(
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
   <QueryClientProvider client={queryClient}>
     <StrictMode>
       <App />
     </StrictMode>
-  </QueryClientProvider>,
-  document.getElementById('root')
+  </QueryClientProvider>
 );

package-lock.json

@@ -28,14 +28,15 @@
   "dependencies": {
     "@carbon/react": "^1.86.0",
     "@codemirror/legacy-modes": "^6.5.2",
-    "@tanstack/react-query": "^4.41.0",
+    "@tanstack/react-query": "^5.90.2",
     "@tektoncd/dashboard-components": "*",
     "@tektoncd/dashboard-utils": "*",
+    "@testing-library/dom": "^10.4.1",
     "@uiw/react-codemirror": "^4.25.2",
     "git-url-parse": "^16.1.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-intl": "^7.1.13",
     "react-is": "^18.3.1",
     "react-router-dom": "^6.30.1",
@@ -49,8 +50,7 @@
     "@storybook/addon-links": "^9.1.10",
     "@storybook/addon-themes": "^9.1.10",
     "@storybook/react-vite": "^9.1.10",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@vitejs/plugin-react-swc": "^4.1.0",
     "@vitest/coverage-istanbul": "^3.2.4",
     "dotenv": "^17.2.3",

package.json

@@ -29,8 +29,8 @@
   },
   "peerDependencies": {
     "@carbon/react": "^1.65.0",
-    "react": "^16.14.0 || ^17.0.2",
-    "react-dom": "^16.14.0 || ^17.0.2",
+    "react": "^16.14.0 || ^17.0.2 || ^18.3.0",
+    "react-dom": "^16.14.0 || ^17.0.2 || ^18.3.0",
     "react-intl": "^7.0.1",
     "react-router-dom": "^5.0.0 || ^6.0.0"
   },

packages/components/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@carbon/react": "^1.68.0",
-    "react": "^16.14.0 || ^17.0.2",
+    "react": "^16.14.0 || ^17.0.2 || ^18.3.0",
     "react-intl": "^7.0.1"
   },
   "engines": {

packages/graph/package.json

@@ -1,5 +1,5 @@
 /*
-Copyright 2021-2023 The Tekton Authors
+Copyright 2021-2025 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { usePrevious, useWebSocketReconnected } from './hooks';
 

packages/utils/src/utils/hooks.test.js

@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { labels } from '@tektoncd/dashboard-utils';
 import { http, HttpResponse } from 'msw';
 

src/api/index.test.js

@@ -121,7 +121,7 @@ function getResourceVersion(resource) {
 }
 
 function handleCreated({ group, kind, payload: _, queryClient, version }) {
-  queryClient.invalidateQueries([group, version, kind]);
+  queryClient.invalidateQueries({ queryKey: [group, version, kind] });
 }
 
 function handleDeleted({ group, kind, payload, queryClient, version }) {
@@ -196,7 +196,7 @@ export function useWebSocket({
 
   useEffect(() => {
     if (enabled === false) {
-      return null;
+      return;
     }
 
     function handleClose() {

src/api/utils.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2024 The Tekton Authors
+Copyright 2019-2025 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import * as comms from './comms';
 import * as utils from './utils';

src/api/utils.test.js

@@ -98,9 +98,9 @@ describe('CreateCustomRun yaml mode', () => {
       }
     );
     await waitFor(() => {
-      expect(getByRole(/textbox/)).toBeTruthy();
+      expect(getByRole('textbox')).toBeTruthy();
     });
-    let actual = getByRole(/textbox/).textContent;
+    let actual = getByRole('textbox').textContent;
     actual = actual.replace(findNameRegexp, 'name: run-1111111111');
     expect(actual.trim()).toEqual(expectedCustomRunOneLine);
   });