frontend-test-utils: fix Router deprecation warning

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

.changeset/seven-states-sleep.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-test-utils': patch
+---
+
+Fixed Router deprecation warning and switched to using new `RouterBlueprint` from `@backstage/plugin-app-api`.

.patches/pr-32409.txt

@@ -0,0 +1 @@
+Fixes a deprecation warning for Router extension in tests

packages/frontend-test-utils/package.json

@@ -35,6 +35,7 @@
     "@backstage/frontend-app-api": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/plugin-app": "workspace:^",
+    "@backstage/plugin-app-react": "workspace:^",
     "@backstage/test-utils": "workspace:^",
     "@backstage/types": "workspace:^",
     "@backstage/version-bridge": "workspace:^",

packages/frontend-test-utils/src/app/renderInTestApp.tsx

@@ -27,11 +27,12 @@ import {
   RouteRef,
   useRouteRef,
   IconComponent,
-  RouterBlueprint,
   NavItemBlueprint,
   createFrontendPlugin,
   FrontendFeature,
+  createFrontendModule,
 } from '@backstage/frontend-plugin-api';
+import { RouterBlueprint } from '@backstage/plugin-app-react';
 import appPlugin from '@backstage/plugin-app';
 
 const DEFAULT_MOCK_CONFIG = {
@@ -154,15 +155,6 @@ export function renderInTestApp(
         return [coreExtensionData.reactElement(element)];
       },
     }),
-    RouterBlueprint.make({
-      params: {
-        component: ({ children }) => (
-          <MemoryRouter initialEntries={options?.initialRouteEntries}>
-            {children}
-          </MemoryRouter>
-        ),
-      },
-    }),
   ];
 
   if (options?.mountedRoutes) {
@@ -189,6 +181,20 @@ export function renderInTestApp(
   }
 
   const features: FrontendFeature[] = [
+    createFrontendModule({
+      pluginId: 'app',
+      extensions: [
+        RouterBlueprint.make({
+          params: {
+            component: ({ children }) => (
+              <MemoryRouter initialEntries={options?.initialRouteEntries}>
+                {children}
+              </MemoryRouter>
+            ),
+          },
+        }),
+      ],
+    }),
     createFrontendPlugin({
       pluginId: 'test',
       extensions,

packages/frontend-test-utils/src/app/renderTestApp.tsx

@@ -17,16 +17,17 @@
 import { createSpecializedApp } from '@backstage/frontend-app-api';
 import {
   coreExtensionData,
+  createFrontendModule,
   createFrontendPlugin,
   ExtensionDefinition,
   FrontendFeature,
-  RouterBlueprint,
 } from '@backstage/frontend-plugin-api';
 import { render } from '@testing-library/react';
 import appPlugin from '@backstage/plugin-app';
 import { JsonObject } from '@backstage/types';
 import { ConfigReader } from '@backstage/config';
 import { MemoryRouter } from 'react-router-dom';
+import { RouterBlueprint } from '@backstage/plugin-app-react';
 
 const DEFAULT_MOCK_CONFIG = {
   app: { baseUrl: 'http://localhost:3000' },
@@ -74,20 +75,23 @@ const appPluginOverride = appPlugin.withOverrides({
  * @public
  */
 export function renderTestApp(options: RenderTestAppOptions) {
-  const extensions = [
-    RouterBlueprint.make({
-      params: {
-        component: ({ children }) => (
-          <MemoryRouter initialEntries={options.initialRouteEntries}>
-            {children}
-          </MemoryRouter>
-        ),
-      },
-    }),
-    ...(options.extensions ?? []),
-  ];
+  const extensions = [...(options.extensions ?? [])];
 
   const features: FrontendFeature[] = [
+    createFrontendModule({
+      pluginId: 'app',
+      extensions: [
+        RouterBlueprint.make({
+          params: {
+            component: ({ children }) => (
+              <MemoryRouter initialEntries={options.initialRouteEntries}>
+                {children}
+              </MemoryRouter>
+            ),
+          },
+        }),
+      ],
+    }),
     createFrontendPlugin({
       pluginId: 'test',
       extensions,

yarn.lock

@@ -3952,6 +3952,7 @@ __metadata:
     "@backstage/frontend-app-api": "workspace:^"
     "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/plugin-app": "workspace:^"
+    "@backstage/plugin-app-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/types": "workspace:^"
     "@backstage/version-bridge": "workspace:^"