diff --git a/.changeset/three-nails-remember.md b/.changeset/three-nails-remember.md new file mode 100644 index 0000000000..e5bc83b9d3 --- /dev/null +++ b/.changeset/three-nails-remember.md @@ -0,0 +1,7 @@ +--- +'@backstage/test-utils': patch +--- + +Add support for React Testing Library 13+, and thus React 18. + +We're exposing an additional option to the `render*` methods to enable the [legacyRoot](https://testing-library.com/docs/react-testing-library/api/#legacyroot) flow. diff --git a/packages/test-utils/api-report.md b/packages/test-utils/api-report.md index fe4edd627a..60bd352726 100644 --- a/packages/test-utils/api-report.md +++ b/packages/test-utils/api-report.md @@ -55,6 +55,11 @@ export type ErrorWithContext = { context?: ErrorApiErrorContext; }; +// @public +export type LegacyRootOption = { + legacyRoot?: boolean; +}; + // @public export type LogCollector = AsyncLogCollector | SyncLogCollector; @@ -194,13 +199,13 @@ export type MockStorageBucket = { // @public export function renderInTestApp( Component: ComponentType> | ReactNode, - options?: TestAppOptions, + options?: TestAppOptions & LegacyRootOption, ): Promise; // @public export function renderWithEffects( nodes: ReactElement, - options?: Pick, + options?: Pick & LegacyRootOption, ): Promise; // @public diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index a95fdf6d8f..ebded4d813 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -33,7 +33,7 @@ import { createRouteRef, } from '@backstage/core-plugin-api'; import { MatcherFunction, RenderResult } from '@testing-library/react'; -import { renderWithEffects } from './testingLibrary'; +import { renderWithEffects, LegacyRootOption } from './testingLibrary'; import { defaultApis } from './defaultApis'; import { mockApis } from './mockApis'; @@ -232,7 +232,7 @@ export function wrapInTestApp( */ export async function renderInTestApp( Component: ComponentType> | ReactNode, - options: TestAppOptions = {}, + options: TestAppOptions & LegacyRootOption = {}, ): Promise { let wrappedElement: React.ReactElement; if (Component instanceof Function) { @@ -240,9 +240,11 @@ export async function renderInTestApp( } else { wrappedElement = Component as React.ReactElement; } + const { legacyRoot } = options; return renderWithEffects(wrappedElement, { wrapper: createTestAppWrapper(options), + legacyRoot, }); } diff --git a/packages/test-utils/src/testUtils/testingLibrary.ts b/packages/test-utils/src/testUtils/testingLibrary.ts index adb9867de8..c5dbd99eb0 100644 --- a/packages/test-utils/src/testUtils/testingLibrary.ts +++ b/packages/test-utils/src/testUtils/testingLibrary.ts @@ -22,6 +22,13 @@ import { RenderResult, } from '@testing-library/react'; +/** + * @public + * Set legacy mode when using React 18/RTL 13+. + * Mock this option while we're working against React 17 or lower. + */ +export type LegacyRootOption = { legacyRoot?: boolean }; + /** * @public * Simplifies rendering of async components in by taking care of the wrapping inside act @@ -36,7 +43,7 @@ import { */ export async function renderWithEffects( nodes: ReactElement, - options?: Pick, + options?: Pick & LegacyRootOption, ): Promise { let value: RenderResult; await act(async () => {