diff --git a/.changeset/violet-steaks-knock.md b/.changeset/violet-steaks-knock.md new file mode 100644 index 0000000000..66139be422 --- /dev/null +++ b/.changeset/violet-steaks-knock.md @@ -0,0 +1,5 @@ +--- +'@backstage/test-utils': patch +--- + +Added missing `Routes` element to wrap the `Route` elements of the test app wrapping. diff --git a/.changeset/wise-emus-wait.md b/.changeset/wise-emus-wait.md new file mode 100644 index 0000000000..6f0e5348c7 --- /dev/null +++ b/.changeset/wise-emus-wait.md @@ -0,0 +1,5 @@ +--- +'@backstage/test-utils': patch +--- + +The internal elements created as part of the `mountedRoutes` implementation are now hidden during rendering. diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx index 32ca3dfc02..c59f66aab5 100644 --- a/packages/test-utils/src/testUtils/appWrappers.test.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx @@ -159,4 +159,17 @@ describe('wrapInTestApp', () => { expect(rendered.getByText('Link S: /my-b-path/y/p')).toBeInTheDocument(); expect(rendered.getByText('Link E: /my-e-path/z')).toBeInTheDocument(); }); + + it('should not make route mounting elements visible during tests', async () => { + const routeRef = createRouteRef({ id: 'foo' }); + + const rendered = await renderInTestApp(foo, { + mountedRoutes: { '/foo': routeRef }, + }); + + const [root] = rendered.baseElement.children; + expect(root).toBeInTheDocument(); + expect(root.children.length).toBe(1); + expect(root.children[0].textContent).toBe('foo'); + }); }); diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index cad1df4ecc..b12e8935b6 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -15,7 +15,7 @@ */ import React, { ComponentType, ReactNode, ReactElement } from 'react'; -import { MemoryRouter } from 'react-router'; +import { MemoryRouter, Routes } from 'react-router'; import { Route } from 'react-router-dom'; import { lightTheme } from '@backstage/theme'; import { ThemeProvider } from '@material-ui/core/styles'; @@ -70,6 +70,8 @@ const BootErrorPage = ({ step, error }: BootErrorPageProps) => { }; const Progress = () =>
; +const NoRender = (_props: { children: ReactNode }) => null; + /** * Options to customize the behavior of the test app wrapper. * @public @@ -190,10 +192,12 @@ export function wrapInTestApp( return (