Merge pull request #31353 from backstage/fix/not-found

NFS: fixed Not found page when a page extension is mounted on /

packages/frontend-plugin-api/src/blueprints/AppRootWrapperBlueprint.test.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { Fragment } from 'react';
 import { AppRootWrapperBlueprint } from './AppRootWrapperBlueprint';
 import { screen, waitFor } from '@testing-library/react';
 import {
@@ -21,7 +21,7 @@ import {
   createExtension,
   createExtensionInput,
 } from '../wiring';
-import { renderInTestApp } from '@backstage/frontend-test-utils';
+import { renderTestApp } from '@backstage/frontend-test-utils';
 
 describe('AppRootWrapperBlueprint', () => {
   it('should return an extension with sensible defaults', () => {
@@ -63,7 +63,7 @@ describe('AppRootWrapperBlueprint', () => {
       },
     });
 
-    renderInTestApp(<div />, { extensions: [extension] });
+    renderTestApp({ extensions: [extension] });
 
     await waitFor(() => expect(screen.getByText('Hello')).toBeInTheDocument());
   });
@@ -83,16 +83,18 @@ describe('AppRootWrapperBlueprint', () => {
           component: ({ children }) => (
             <div data-testid={`${config.name}-${inputs.children.length}`}>
               {children}
-              {inputs.children.flatMap(c =>
-                c.get(coreExtensionData.reactElement),
-              )}
+              {inputs.children.flatMap((c, index) => (
+                <Fragment key={index}>
+                  {c.get(coreExtensionData.reactElement)}
+                </Fragment>
+              ))}
             </div>
           ),
         });
       },
     });
 
-    renderInTestApp(<div />, {
+    renderTestApp({
       extensions: [
         extension,
         createExtension({

packages/frontend-plugin-api/src/blueprints/SwappableComponentBlueprint.test.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { renderInTestApp } from '@backstage/frontend-test-utils';
+import { renderTestApp } from '@backstage/frontend-test-utils';
 import { createSwappableComponent } from '../components';
 import { SwappableComponentBlueprint } from './SwappableComponentBlueprint';
 import { PageBlueprint } from './PageBlueprint';
-import { waitFor, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
 describe('SwappableComponentBlueprint', () => {
   it('should allow defining a component override for a component ref', () => {
@@ -48,21 +48,19 @@ describe('SwappableComponentBlueprint', () => {
       loader: () => (props: { hello: string }) => <div>{props.hello}</div>,
     });
 
-    renderInTestApp(<div />, {
+    renderTestApp({
       extensions: [
         PageBlueprint.make({
           params: define =>
             define({
-              // todo(blam): there's a bug that this path cannot be `/`?
-              path: '/test',
+              path: '/',
               loader: async () => <TestComponent hello="test!" />,
             }),
         }),
       ],
-      initialRouteEntries: ['/test'],
     });
 
-    await waitFor(() => expect(screen.getByText('test!')).toBeInTheDocument());
+    await expect(screen.findByText('test!')).resolves.toBeInTheDocument();
   });
 
   it('should render a component ref without a default implementation', async () => {
@@ -70,22 +68,21 @@ describe('SwappableComponentBlueprint', () => {
       id: 'test.component',
     });
 
-    renderInTestApp(<div />, {
+    renderTestApp({
       extensions: [
         PageBlueprint.make({
           params: define =>
             define({
-              path: '/test',
+              path: '/',
               loader: async () => <TestComponent />,
             }),
         }),
       ],
-      initialRouteEntries: ['/test'],
     });
 
-    await waitFor(() =>
-      expect(screen.getByTestId('test.component')).toBeInTheDocument(),
-    );
+    await expect(
+      screen.findByTestId('test.component'),
+    ).resolves.toBeInTheDocument();
   });
 
   it('should render a component ref with an async loader implementation', async () => {
@@ -95,21 +92,20 @@ describe('SwappableComponentBlueprint', () => {
         <div>{props.hello}</div>,
     });
 
-    renderInTestApp(<div />, {
+    renderTestApp({
       extensions: [
         PageBlueprint.make({
           params: define =>
             define({
               // todo(blam): there's a bug that this path cannot be `/`?
-              path: '/test',
+              path: '/',
               loader: async () => <TestComponent hello="test!" />,
             }),
         }),
       ],
-      initialRouteEntries: ['/test'],
     });
 
-    await waitFor(() => expect(screen.getByText('test!')).toBeInTheDocument());
+    await expect(screen.findByText('test!')).resolves.toBeInTheDocument();
   });
 
   it('should render a component ref with an async loader implementation and prop transform', async () => {
@@ -120,22 +116,18 @@ describe('SwappableComponentBlueprint', () => {
       transformProps: ({ hello }) => ({ hello: `tr ${hello}` }),
     });
 
-    renderInTestApp(<div />, {
+    renderTestApp({
       extensions: [
         PageBlueprint.make({
           params: define =>
             define({
-              // todo(blam): there's a bug that this path cannot be `/`?
-              path: '/test',
+              path: '/',
               loader: async () => <TestComponent hello="test!" />,
             }),
         }),
       ],
-      initialRouteEntries: ['/test'],
     });
 
-    await waitFor(() =>
-      expect(screen.getByText('tr test!')).toBeInTheDocument(),
-    );
+    await expect(screen.findByText('tr test!')).resolves.toBeInTheDocument();
   });
 });