From 23c72e7e6537dfc972a5b16486cf8d517ddd32bb Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Tue, 7 Oct 2025 12:40:12 +0200
Subject: [PATCH] frontend-test-utils: render the element as Page

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../src/app/renderInTestApp.test.tsx          | 35 +++++++++++--------
 .../src/app/renderInTestApp.tsx               | 21 +++++------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx
index 8e1b1e1ea0..ae72e6a622 100644
--- a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx
+++ b/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx
@@ -20,15 +20,18 @@ import {
   MockAnalyticsApi,
   TestApiProvider,
 } from '@backstage/frontend-test-utils';
-import { analyticsApiRef, useAnalytics } from '@backstage/frontend-plugin-api';
-import { Routes, Route } from 'react-router-dom';
+import {
+  analyticsApiRef,
+  PageBlueprint,
+  useAnalytics,
+} from '@backstage/frontend-plugin-api';
 import { renderInTestApp } from './renderInTestApp';
 
 describe('renderInTestApp', () => {
   it('should render the given component in a page', async () => {
     const IndexPage = () => <div>Index Page</div>;
     renderInTestApp(<IndexPage />);
-    expect(screen.getByText('Index Page')).toBeInTheDocument();
+    expect(await screen.findByText('Index Page')).toBeInTheDocument();
   });
 
   it('should works with apis provider', async () => {
@@ -55,7 +58,7 @@ describe('renderInTestApp', () => {
       </TestApiProvider>,
     );
 
-    fireEvent.click(screen.getByRole('link', { name: 'See details' }));
+    fireEvent.click(await screen.findByRole('link', { name: 'See details' }));
 
     expect(analyticsApiMock.getEvents()).toEqual(
       expect.arrayContaining([
@@ -68,16 +71,20 @@ describe('renderInTestApp', () => {
   });
 
   it('should support setting different locations in the history stack', async () => {
-    renderInTestApp(
-      <Routes>
-        <Route path="/" element={<h1>Index Page</h1>} />
-        <Route path="/second-page" element={<h1>Second Page</h1>} />
-      </Routes>,
-      {
-        initialRouteEntries: ['/second-page'],
-      },
-    );
+    renderInTestApp(<h1>Index page</h1>, {
+      extensions: [
+        PageBlueprint.make({
+          name: 'second-page',
+          params: defineParams =>
+            defineParams({
+              path: '/second-page',
+              loader: async () => <h1>Second Page</h1>,
+            }),
+        }),
+      ],
+      initialRouteEntries: ['/second-page'],
+    });
 
-    expect(screen.getByText('Second Page')).toBeInTheDocument();
+    expect(await screen.findByText('Second Page')).toBeInTheDocument();
   });
 });
diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.tsx
index e1b35eba6c..8f52f349fe 100644
--- a/packages/frontend-test-utils/src/app/renderInTestApp.tsx
+++ b/packages/frontend-test-utils/src/app/renderInTestApp.tsx
@@ -31,6 +31,7 @@ import {
   NavItemBlueprint,
   createFrontendPlugin,
   FrontendFeature,
+  PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import appPlugin from '@backstage/plugin-app';
 
@@ -107,12 +108,6 @@ const appPluginOverride = appPlugin.withOverrides({
     appPlugin.getExtension('sign-in-page:app').override({
       disabled: true,
     }),
-    appPlugin.getExtension('app/layout').override({
-      disabled: true,
-    }),
-    appPlugin.getExtension('app/routes').override({
-      disabled: true,
-    }),
     appPlugin.getExtension('app/nav').override({
       output: [coreExtensionData.reactElement],
       factory(_originalFactory, { inputs }) {
@@ -152,13 +147,6 @@ export function renderInTestApp(
   options?: TestAppOptions,
 ): RenderResult {
   const extensions: Array<ExtensionDefinition> = [
-    createExtension({
-      attachTo: { id: 'app/root', input: 'children' },
-      output: [coreExtensionData.reactElement],
-      factory: () => {
-        return [coreExtensionData.reactElement(element)];
-      },
-    }),
     RouterBlueprint.make({
       params: {
         component: ({ children }) => (
@@ -197,6 +185,13 @@ export function renderInTestApp(
     extensions.push(...options.extensions);
   }
 
+  extensions.push(
+    PageBlueprint.make({
+      name: 'mocked-root-page',
+      params: define => define({ path: '/', loader: async () => element }),
+    }),
+  );
+
   const features: FrontendFeature[] = [
     createFrontendPlugin({
       pluginId: 'test',