plugins: fix tests for react router bump

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: blam <ben@blam.sh>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/airbrake/src/extensions.test.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { EntityAirbrakeContent } from './extensions';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { airbrakeApiRef, MockAirbrakeApi } from './api';
 import { createEntity } from './api';
@@ -26,7 +26,9 @@ describe('The Airbrake entity', () => {
     const rendered = await renderInTestApp(
       <TestApiProvider apis={[[airbrakeApiRef, new MockAirbrakeApi()]]}>
         <EntityProvider entity={createEntity(123)}>
-          <Route path="/" element={<EntityAirbrakeContent />} />
+          <Routes>
+            <Route path="/" element={<EntityAirbrakeContent />} />
+          </Routes>
         </EntityProvider>
       </TestApiProvider>,
     );

plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx

@@ -34,7 +34,6 @@ import {
 } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { Route, Routes } from 'react-router';
 import { EntityLayout } from './EntityLayout';
 
 const mockEntity = {
@@ -160,28 +159,21 @@ describe('EntityLayout', () => {
 
   it('navigates when user clicks different tab', async () => {
     const rendered = await renderInTestApp(
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <ApiProvider apis={mockApis}>
-              <EntityProvider entity={mockEntity}>
-                <EntityLayout>
-                  <EntityLayout.Route path="/" title="tabbed-test-title">
-                    <div>tabbed-test-content</div>
-                  </EntityLayout.Route>
-                  <EntityLayout.Route
-                    path="/some-other-path"
-                    title="tabbed-test-title-2"
-                  >
-                    <div>tabbed-test-content-2</div>
-                  </EntityLayout.Route>
-                </EntityLayout>
-              </EntityProvider>
-            </ApiProvider>
-          }
-        />
-      </Routes>,
+      <ApiProvider apis={mockApis}>
+        <EntityProvider entity={mockEntity}>
+          <EntityLayout>
+            <EntityLayout.Route path="/" title="tabbed-test-title">
+              <div>tabbed-test-content</div>
+            </EntityLayout.Route>
+            <EntityLayout.Route
+              path="/some-other-path"
+              title="tabbed-test-title-2"
+            >
+              <div>tabbed-test-content-2</div>
+            </EntityLayout.Route>
+          </EntityLayout>
+        </EntityProvider>
+      </ApiProvider>,
       {
         mountedRoutes: {
           '/catalog/:namespace/:kind/:name': entityRouteRef,

plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx

@@ -13,16 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  renderInTestApp,
-  renderWithEffects,
-  TestApiRegistry,
-} from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
+import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import { act, fireEvent, within } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter, Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { scaffolderApiRef } from '../../api';
 import { ScaffolderApi } from '../../types';
 import { rootRouteRef } from '../../routes';
@@ -169,17 +163,17 @@ describe('TemplatePage', () => {
       undefined as any,
     );
 
-    const rendered = await renderWithEffects(
+    const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
-        <ThemeProvider theme={lightTheme}>
-          <MemoryRouter initialEntries={['/create/test']}>
-            <Route path="/create/test">
-              <TemplatePage />
-            </Route>
-            <Route path="/create" element={<>This is root</>} />
-          </MemoryRouter>
-        </ThemeProvider>
+        <Routes>
+          <Route path="/create/test" element={<TemplatePage />} />
+          <Route path="/create" element={<>This is root</>} />
+        </Routes>
       </ApiProvider>,
+      {
+        routeEntries: ['/create'],
+        mountedRoutes: { '/create': rootRouteRef },
+      },
     );
 
     expect(

plugins/search/src/components/util.test.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { act, render } from '@testing-library/react';
 import { useNavigateToQuery } from './util';
-import { Routes, Route } from 'react-router-dom';
 import { rootRouteRef } from '../plugin';
 
 const navigate = jest.fn();
@@ -38,16 +37,11 @@ describe('util', () => {
 
       await act(async () => {
         await render(
-          wrapInTestApp(
-            <Routes>
-              <Route element={<MyComponent />} />
-            </Routes>,
-            {
-              mountedRoutes: {
-                '/search': rootRouteRef,
-              },
+          wrapInTestApp(<MyComponent />, {
+            mountedRoutes: {
+              '/search': rootRouteRef,
             },
-          ),
+          }),
         );
 
         expect(navigate).toHaveBeenCalledTimes(1);

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, ReactChild, Children } from 'react';
+import React, { ReactNode, Children, ReactElement } from 'react';
 import { useOutlet } from 'react-router-dom';
 
 import { Page } from '@backstage/core-components';
@@ -30,15 +30,10 @@ import { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';
 import { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';
 import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';
 import { rootDocsRouteRef } from '../../../routes';
-import { useRouteRefParams } from '@backstage/core-plugin-api';
-
-type Extension = ReactChild & {
-  type: {
-    __backstage_data: {
-      map: Map<string, boolean>;
-    };
-  };
-};
+import {
+  getComponentData,
+  useRouteRefParams,
+} from '@backstage/core-plugin-api';
 
 /**
  * Props for {@link TechDocsReaderLayout}
@@ -94,8 +89,18 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
     const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
 
     const page = childrenList.find(child => {
-      const { type } = child as Extension;
-      return !type?.__backstage_data?.map?.get(TECHDOCS_ADDONS_WRAPPER_KEY);
+      if (getComponentData(child, TECHDOCS_ADDONS_WRAPPER_KEY)) {
+        return false;
+      }
+
+      // react-router 6 stable wraps children in a routing context provider, so check one level deeper
+      const nestedChildren = (child as ReactElement)?.props?.children;
+      if (nestedChildren) {
+        return !Children.toArray(nestedChildren).some(nested =>
+          getComponentData(nested, TECHDOCS_ADDONS_WRAPPER_KEY),
+        );
+      }
+      return true;
     });
 
     return (

plugins/todo/src/plugin.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { todoPlugin, EntityTodoContent } from './plugin';
 import { todoApiRef } from './api';
@@ -55,7 +55,9 @@ describe('todo', () => {
             metadata: { name: 'Test TODO' },
           }}
         >
-          <Route path="/" element={<EntityTodoContent />} />
+          <Routes>
+            <Route path="/" element={<EntityTodoContent />} />
+          </Routes>
         </EntityProvider>
       </TestApiProvider>,
     );