Do not create extensionTree during tests

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Johan Haals <johan.haals@gmail.com>

packages/app/src/App.tsx

@@ -117,7 +117,10 @@ import { PuppetDbPage } from '@backstage/plugin-puppetdb';
 import { DevToolsPage } from '@backstage/plugin-devtools';
 import { customDevToolsPage } from './components/devtools/CustomDevToolsPage';
 import { CatalogUnprocessedEntitiesPage } from '@backstage/plugin-catalog-unprocessed-entities';
-import { createExtensionTree } from '@backstage/frontend-app-api';
+import {
+  createExtensionTree,
+  ExtensionTree,
+} from '@backstage/frontend-app-api';
 
 const app = createApp({
   apis,
@@ -165,9 +168,12 @@ const app = createApp({
 });
 
 /* HIGHLY EXPERIMENTAL. DO NOT USE THIS IN YOUR APP */
-const extensionTree = createExtensionTree({
-  config: ConfigReader.fromConfigs(await defaultConfigLoader()),
-});
+let extensionTree: ExtensionTree | undefined;
+if (process.env.NODE_ENV === 'test') {
+  extensionTree = createExtensionTree({
+    config: ConfigReader.fromConfigs(await defaultConfigLoader()),
+  });
+}
 
 const routes = (
   <FlatRoutes>
@@ -283,7 +289,8 @@ const routes = (
       element={<TechRadarPage width={1500} height={800} />}
     />
     {
-      /* HIGHLY EXPERIMENTAL. DO NOT USE THIS IN YOUR APP */ extensionTree.getRootRoutes()
+      /* HIGHLY EXPERIMENTAL. DO NOT USE THIS IN YOUR APP */ extensionTree?.getRootRoutes() ??
+        null
     }
     <Route path="/lighthouse" element={<LighthousePage />} />
     <Route path="/api-docs" element={<ApiExplorerPage />} />

packages/app/src/components/Root/Root.tsx

@@ -85,7 +85,7 @@ const SidebarLogo = () => {
 export const Root = ({
   children,
   extensionTree,
-}: PropsWithChildren<{ extensionTree: ExtensionTree }>) => (
+}: PropsWithChildren<{ extensionTree?: ExtensionTree }>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
@@ -167,7 +167,8 @@ export const Root = ({
             text="Cost Insights"
           />
           {
-            /* HIGHLY EXPERIMENTAL. DO NOT USE THIS IN YOUR APP */ extensionTree.getSidebarItems()
+            /* HIGHLY EXPERIMENTAL. DO NOT USE THIS IN YOUR APP */ extensionTree?.getSidebarItems() ??
+              null
           }
           <SidebarItem icon={Score} to="score-board" text="Score board" />
         </SidebarScrollWrapper>