frontend-app-api: make app initialization async

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

packages/frontend-plugin-api/src/wiring/createPlugin.test.ts

@@ -16,14 +16,14 @@
 
 import React from 'react';
 import { createApp } from '@backstage/frontend-app-api';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { createSchemaFromZod } from '../schema/createSchemaFromZod';
 import { createPlugin, BackstagePlugin } from './createPlugin';
 import { JsonObject } from '@backstage/types';
 import { createExtension } from './createExtension';
 import { createExtensionDataRef } from './createExtensionDataRef';
 import { coreExtensionData } from './coreExtensionData';
-import { MockConfigApi } from '@backstage/test-utils';
+import { MockConfigApi, renderWithEffects } from '@backstage/test-utils';
 import { createExtensionInput } from './createExtensionInput';
 
 const nameExtensionDataRef = createExtensionDataRef<string>('name');
@@ -112,7 +112,7 @@ function createTestAppRoot({
 }) {
   return createApp({
     plugins: plugins,
-    config: new MockConfigApi(config),
+    configLoader: async () => new MockConfigApi(config),
   }).createRoot();
 }
 
@@ -123,24 +123,26 @@ describe('createPlugin', () => {
     expect(plugin).toBeDefined();
   });
 
-  it('should create a plugin with extension instances', () => {
+  it('should create a plugin with extension instances', async () => {
     const plugin = createPlugin({
       id: 'empty',
       extensions: [TechRadarPage, CatalogPage, outputExtension],
     });
     expect(plugin).toBeDefined();
 
-    render(
+    await renderWithEffects(
       createTestAppRoot({
         plugins: [plugin],
         config: { app: { extensions: [{ 'core.layout': false }] } },
       }),
     );
 
-    expect(screen.getByText('Names: TechRadar, Catalog')).toBeInTheDocument();
+    await expect(
+      screen.findByText('Names: TechRadar, Catalog'),
+    ).resolves.toBeInTheDocument();
   });
 
-  it('should create a plugin with nested extension instances', () => {
+  it('should create a plugin with nested extension instances', async () => {
     const plugin = createPlugin({
       id: 'empty',
       extensions: [
@@ -153,7 +155,7 @@ describe('createPlugin', () => {
     });
     expect(plugin).toBeDefined();
 
-    render(
+    await renderWithEffects(
       createTestAppRoot({
         plugins: [plugin],
         config: {
@@ -171,10 +173,10 @@ describe('createPlugin', () => {
       }),
     );
 
-    expect(
-      screen.getByText(
+    await expect(
+      screen.findByText(
         'Names: TechRadar, CatalogRenamed, TechDocs-TechDocsAddon',
       ),
-    ).toBeInTheDocument();
+    ).resolves.toBeInTheDocument();
   });
 });