test-utils: add missing Routes element wrapping

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/violet-steaks-knock.md

@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+Added missing `Routes` element to wrap the `Route` elements of the test app wrapping.

.changeset/wise-emus-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+The internal elements created as part of the `mountedRoutes` implementation are now hidden during rendering.

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentType, ReactNode, ReactElement } from 'react';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter, Routes } from 'react-router';
 import { Route } from 'react-router-dom';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core/styles';
@@ -70,6 +70,8 @@ const BootErrorPage = ({ step, error }: BootErrorPageProps) => {
 };
 const Progress = () => <div data-testid="progress" />;
 
+const NoRender = (_props: { children: ReactNode }) => null;
+
 /**
  * Options to customize the behavior of the test app wrapper.
  * @public
@@ -190,10 +192,12 @@ export function wrapInTestApp(
   return (
     <AppProvider>
       <AppRouter>
-        {routeElements}
+        <NoRender>{routeElements}</NoRender>
         {/* The path of * here is needed to be set as a catch all, so it will render the wrapper element
          *  and work with nested routes if they exist too */}
-        <Route path="*" element={wrappedElement} />
+        <Routes>
+          <Route path="/*" element={wrappedElement} />
+        </Routes>
       </AppRouter>
     </AppProvider>
   );