diff --git a/plugins/airbrake/src/extensions.test.tsx b/plugins/airbrake/src/extensions.test.tsx
index 05afe8f1e3..fd41f36930 100644
--- a/plugins/airbrake/src/extensions.test.tsx
+++ b/plugins/airbrake/src/extensions.test.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { EntityAirbrakeContent } from './extensions';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { airbrakeApiRef, MockAirbrakeApi } from './api';
import { createEntity } from './api';
@@ -26,7 +26,9 @@ describe('The Airbrake entity', () => {
const rendered = await renderInTestApp(
- } />
+
+ } />
+
,
);
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
index 0a3f443d3e..548fff3ff1 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
@@ -34,7 +34,6 @@ import {
} from '@backstage/test-utils';
import { act, fireEvent } from '@testing-library/react';
import React from 'react';
-import { Route, Routes } from 'react-router';
import { EntityLayout } from './EntityLayout';
const mockEntity = {
@@ -160,28 +159,21 @@ describe('EntityLayout', () => {
it('navigates when user clicks different tab', async () => {
const rendered = await renderInTestApp(
-
-
-
-
-
- tabbed-test-content
-
-
- tabbed-test-content-2
-
-
-
-
- }
- />
- ,
+
+
+
+
+ tabbed-test-content
+
+
+ tabbed-test-content-2
+
+
+
+ ,
{
mountedRoutes: {
'/catalog/:namespace/:kind/:name': entityRouteRef,
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
index 34e6901937..d35b561f2b 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
@@ -13,16 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {
- renderInTestApp,
- renderWithEffects,
- TestApiRegistry,
-} from '@backstage/test-utils';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
+import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
import { act, fireEvent, within } from '@testing-library/react';
import React from 'react';
-import { MemoryRouter, Route } from 'react-router';
+import { Route, Routes } from 'react-router';
import { scaffolderApiRef } from '../../api';
import { ScaffolderApi } from '../../types';
import { rootRouteRef } from '../../routes';
@@ -169,17 +163,17 @@ describe('TemplatePage', () => {
undefined as any,
);
- const rendered = await renderWithEffects(
+ const rendered = await renderInTestApp(
-
-
-
-
-
- This is root>} />
-
-
+
+ } />
+ This is root>} />
+
,
+ {
+ routeEntries: ['/create'],
+ mountedRoutes: { '/create': rootRouteRef },
+ },
);
expect(
diff --git a/plugins/search/src/components/util.test.tsx b/plugins/search/src/components/util.test.tsx
index 1b452a205e..74d5ec0b50 100644
--- a/plugins/search/src/components/util.test.tsx
+++ b/plugins/search/src/components/util.test.tsx
@@ -18,7 +18,6 @@ import React from 'react';
import { wrapInTestApp } from '@backstage/test-utils';
import { act, render } from '@testing-library/react';
import { useNavigateToQuery } from './util';
-import { Routes, Route } from 'react-router-dom';
import { rootRouteRef } from '../plugin';
const navigate = jest.fn();
@@ -38,16 +37,11 @@ describe('util', () => {
await act(async () => {
await render(
- wrapInTestApp(
-
- } />
- ,
- {
- mountedRoutes: {
- '/search': rootRouteRef,
- },
+ wrapInTestApp(, {
+ mountedRoutes: {
+ '/search': rootRouteRef,
},
- ),
+ }),
);
expect(navigate).toHaveBeenCalledTimes(1);
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
index cbeb667417..1c276b87a1 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import React, { ReactNode, ReactChild, Children } from 'react';
+import React, { ReactNode, Children, ReactElement } from 'react';
import { useOutlet } from 'react-router-dom';
import { Page } from '@backstage/core-components';
@@ -30,15 +30,10 @@ import { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';
import { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';
import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';
import { rootDocsRouteRef } from '../../../routes';
-import { useRouteRefParams } from '@backstage/core-plugin-api';
-
-type Extension = ReactChild & {
- type: {
- __backstage_data: {
- map: Map;
- };
- };
-};
+import {
+ getComponentData,
+ useRouteRefParams,
+} from '@backstage/core-plugin-api';
/**
* Props for {@link TechDocsReaderLayout}
@@ -94,8 +89,18 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
const page = childrenList.find(child => {
- const { type } = child as Extension;
- return !type?.__backstage_data?.map?.get(TECHDOCS_ADDONS_WRAPPER_KEY);
+ if (getComponentData(child, TECHDOCS_ADDONS_WRAPPER_KEY)) {
+ return false;
+ }
+
+ // react-router 6 stable wraps children in a routing context provider, so check one level deeper
+ const nestedChildren = (child as ReactElement)?.props?.children;
+ if (nestedChildren) {
+ return !Children.toArray(nestedChildren).some(nested =>
+ getComponentData(nested, TECHDOCS_ADDONS_WRAPPER_KEY),
+ );
+ }
+ return true;
});
return (
diff --git a/plugins/todo/src/plugin.test.tsx b/plugins/todo/src/plugin.test.tsx
index af4704c16f..40dfdfbff2 100644
--- a/plugins/todo/src/plugin.test.tsx
+++ b/plugins/todo/src/plugin.test.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { todoPlugin, EntityTodoContent } from './plugin';
import { todoApiRef } from './api';
@@ -55,7 +55,9 @@ describe('todo', () => {
metadata: { name: 'Test TODO' },
}}
>
- } />
+
+ } />
+
,
);