diff --git a/.changeset/three-kiwis-turn.md b/.changeset/three-kiwis-turn.md index 48a1ffff33..d5802fa586 100644 --- a/.changeset/three-kiwis-turn.md +++ b/.changeset/three-kiwis-turn.md @@ -5,12 +5,15 @@ Deprecate the `.render` method of the `createExtensionTester` in favour of using `renderInTestApp` directly. ```tsx -import { renderInTestApp, createExtensionTester } from '@backstage/frontend-test-utils'; +import { + renderInTestApp, + createExtensionTester, +} from '@backstage/frontend-test-utils'; const tester = createExtensionTester(extension); const { getByTestId } = renderInTestApp(tester.element()); // or if you're not using `coreExtensionData.reactElement` as the output ref -const { getByTestId } = renderInTestApp(tester.data(myComponentRef))' +const { getByTestId } = renderInTestApp(tester.data(myComponentRef)); ``` diff --git a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx index c4bcb4b467..d70a426a57 100644 --- a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.test.tsx @@ -16,7 +16,10 @@ import React from 'react'; import { createRouteRef } from '../routing'; import { PageBlueprint } from './PageBlueprint'; -import { createExtensionTester } from '@backstage/frontend-test-utils'; +import { + createExtensionTester, + renderInTestApp, +} from '@backstage/frontend-test-utils'; import { coreExtensionData, createExtensionBlueprint, @@ -144,7 +147,7 @@ describe('PageBlueprint', () => { CardBlueprint.make({ name: 'card', params: {} }), ); - const { getByTestId, getByText } = tester.render(); + const { getByTestId, getByText } = renderInTestApp(tester.element()); await waitFor(() => expect(getByTestId('card')).toBeInTheDocument()); await waitFor(() => diff --git a/packages/frontend-test-utils/api-report.md b/packages/frontend-test-utils/api-report.md index 2c16028dd1..0cbdace03e 100644 --- a/packages/frontend-test-utils/api-report.md +++ b/packages/frontend-test-utils/api-report.md @@ -27,7 +27,6 @@ import { RouteRef } from '@backstage/frontend-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; import { TestApiProviderProps } from '@backstage/test-utils'; import { TestApiRegistry } from '@backstage/test-utils'; -import { testingLibraryDomTypesQueries } from '@testing-library/dom/types/queries'; import { withLogCollector } from '@backstage/test-utils'; // @public (undocumented) @@ -100,7 +99,7 @@ export { registerMswTestHooks }; export function renderInTestApp( element: JSX.Element, options?: TestAppOptions, -): RenderResult; +): RenderResult; // @public @deprecated (undocumented) export function setupRequestMockHandlers(worker: { diff --git a/packages/frontend-test-utils/src/app/createExtensionTester.tsx b/packages/frontend-test-utils/src/app/createExtensionTester.tsx index fb05270eb8..83ac2aa600 100644 --- a/packages/frontend-test-utils/src/app/createExtensionTester.tsx +++ b/packages/frontend-test-utils/src/app/createExtensionTester.tsx @@ -43,6 +43,7 @@ import { resolveAppNodeSpecs } from '../../../frontend-app-api/src/tree/resolveA import { instantiateAppNodeTree } from '../../../frontend-app-api/src/tree/instantiateAppNodeTree'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import { readAppExtensionsConfig } from '../../../frontend-app-api/src/tree/readAppExtensionsConfig'; +import { TestAppNavExtension } from './renderInTestApp'; /** @public */ export class ExtensionQuery { @@ -227,6 +228,7 @@ export class ExtensionTester { {children} ), }), + TestAppNavExtension, ], }), ], diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.tsx index 73a29ce0bb..dd03cdd2a2 100644 --- a/packages/frontend-test-utils/src/app/renderInTestApp.tsx +++ b/packages/frontend-test-utils/src/app/renderInTestApp.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { Link, MemoryRouter } from 'react-router-dom'; import { createSpecializedApp } from '@backstage/frontend-app-api'; -import { render } from '@testing-library/react'; +import { RenderResult, render } from '@testing-library/react'; import { ConfigReader } from '@backstage/config'; import { JsonObject } from '@backstage/types'; import { @@ -81,7 +81,7 @@ const NavItem = (props: { ); }; -const TestAppNavExtension = createExtension({ +export const TestAppNavExtension = createExtension({ namespace: 'app', name: 'nav', attachTo: { id: 'app/layout', input: 'nav' }, @@ -122,7 +122,7 @@ const TestAppNavExtension = createExtension({ export function renderInTestApp( element: JSX.Element, options?: TestAppOptions, -) { +): RenderResult { const extensions: Array> = [ createExtension({ namespace: 'test',