diff --git a/.changeset/three-houses-learn.md b/.changeset/three-houses-learn.md
new file mode 100644
index 0000000000..65800eb1e8
--- /dev/null
+++ b/.changeset/three-houses-learn.md
@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+Support routes of type `SubRouteRef` in `mountedRoutes` parameter of `renderInTestApp`.
diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx
index 4899f07061..abdc4540bc 100644
--- a/packages/test-utils/src/testUtils/appWrappers.test.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx
@@ -14,20 +14,22 @@
* limitations under the License.
*/
-import React, { useEffect } from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp, renderInTestApp } from './appWrappers';
-import { Route, Routes } from 'react-router';
-import { withLogCollector } from '@backstage/test-utils-core';
import {
- useApi,
- useRouteRef,
- errorApiRef,
ApiProvider,
ApiRegistry,
+ createExternalRouteRef,
createRouteRef,
+ createSubRouteRef,
+ errorApiRef,
+ useApi,
+ useRouteRef,
} from '@backstage/core-api';
+import { withLogCollector } from '@backstage/test-utils-core';
+import { render } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { Route, Routes } from 'react-router';
import { MockErrorApi } from './apis';
+import { renderInTestApp, wrapInTestApp } from './appWrappers';
describe('wrapInTestApp', () => {
it('should provide routing and warn about missing act()', async () => {
@@ -117,16 +119,29 @@ describe('wrapInTestApp', () => {
});
it('should allow route refs to be mounted on specific paths', async () => {
- const aRouteRef = createRouteRef({ title: 'A' });
- const bRouteRef = createRouteRef({ title: 'B', params: ['name'] });
+ const aRouteRef = createRouteRef({ id: 'A' });
+ const bRouteRef = createRouteRef({ id: 'B', params: ['name'] });
+ const subRouteRef = createSubRouteRef({
+ id: 'S',
+ parent: bRouteRef,
+ path: '/:page',
+ });
+ const externalRouteRef = createExternalRouteRef({
+ id: 'E',
+ params: ['name'],
+ });
const MyComponent = () => {
const a = useRouteRef(aRouteRef);
const b = useRouteRef(bRouteRef);
+ const s = useRouteRef(subRouteRef);
+ const e = useRouteRef(externalRouteRef);
return (
Link A: {a()}
Link B: {b({ name: 'x' })}
+
Link S: {s({ name: 'y', page: 'p' })}
+
Link E: {e({ name: 'z' })}
);
};
@@ -135,9 +150,13 @@ describe('wrapInTestApp', () => {
mountedRoutes: {
'/my-a-path': aRouteRef,
'/my-b-path/:name': bRouteRef,
+ '/my-b-path/:name/:page': subRouteRef,
+ '/my-e-path/:name': externalRouteRef,
},
});
expect(rendered.getByText('Link A: /my-a-path')).toBeInTheDocument();
expect(rendered.getByText('Link B: /my-b-path/x')).toBeInTheDocument();
+ expect(rendered.getByText('Link S: /my-b-path/y/p')).toBeInTheDocument();
+ expect(rendered.getByText('Link E: /my-e-path/z')).toBeInTheDocument();
});
});
diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx
index 301366cbbd..8f538dd3fb 100644
--- a/packages/test-utils/src/testUtils/appWrappers.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.tsx
@@ -14,20 +14,21 @@
* limitations under the License.
*/
-import React, { ComponentType, ReactNode, ReactElement } from 'react';
+import privateExports, {
+ attachComponentData,
+ BootErrorPageProps,
+ createRouteRef,
+ defaultSystemIcons,
+ ExternalRouteRef,
+ RouteRef,
+ SubRouteRef,
+} from '@backstage/core-api';
+import { renderWithEffects } from '@backstage/test-utils-core';
+import { lightTheme } from '@backstage/theme';
+import { RenderResult } from '@testing-library/react';
+import React, { ComponentType, ReactElement, ReactNode } from 'react';
import { MemoryRouter } from 'react-router';
import { Route } from 'react-router-dom';
-import { lightTheme } from '@backstage/theme';
-import privateExports, {
- defaultSystemIcons,
- BootErrorPageProps,
- RouteRef,
- ExternalRouteRef,
- attachComponentData,
- createRouteRef,
-} from '@backstage/core-api';
-import { RenderResult } from '@testing-library/react';
-import { renderWithEffects } from '@backstage/test-utils-core';
import { mockApis } from './mockApis';
const { PrivateAppImpl } = privateExports;
@@ -63,11 +64,11 @@ type TestAppOptions = {
* // ...
* const link = useRouteRef(myRouteRef)
*/
- mountedRoutes?: { [path: string]: RouteRef | ExternalRouteRef };
+ mountedRoutes?: { [path: string]: RouteRef | SubRouteRef | ExternalRouteRef };
};
function isExternalRouteRef(
- routeRef: RouteRef | ExternalRouteRef,
+ routeRef: RouteRef | SubRouteRef | ExternalRouteRef,
): routeRef is ExternalRouteRef {
// TODO(Rugvip): Least ugly workaround for now, but replace :D
return String(routeRef).includes('{type=external,');