Merge pull request #10838 from backstage/rugvip/test-routes

test-utils: add missing Routes element wrapping

.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.test.tsx

@@ -159,4 +159,17 @@ describe('wrapInTestApp', () => {
     expect(rendered.getByText('Link S: /my-b-path/y/p')).toBeInTheDocument();
     expect(rendered.getByText('Link E: /my-e-path/z')).toBeInTheDocument();
   });
+
+  it('should not make route mounting elements visible during tests', async () => {
+    const routeRef = createRouteRef({ id: 'foo' });
+
+    const rendered = await renderInTestApp(<span>foo</span>, {
+      mountedRoutes: { '/foo': routeRef },
+    });
+
+    const [root] = rendered.baseElement.children;
+    expect(root).toBeInTheDocument();
+    expect(root.children.length).toBe(1);
+    expect(root.children[0].textContent).toBe('foo');
+  });
 });

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>
   );

plugins/org/src/components/MyGroupsSidebarItem/MyGroupsSidebarItem.test.tsx

@@ -58,9 +58,7 @@ describe('MyGroupsSidebarItem Test', () => {
           },
         },
       );
-      expect(
-        rendered.getByText('Mounted at /catalog/:namespace/:kind/:name'),
-      ).toBeInTheDocument();
+      expect(rendered.container).toBeEmptyDOMElement();
     });
   });