Merge pull request #19569 from Pike/test-utils-react18

Make test-utils not depend on testing-library directly

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<PropsWithChildren<{}>> | ReactNode,
-  options?: TestAppOptions,
+  options?: TestAppOptions & LegacyRootOption,
 ): Promise<RenderResult>;
 
 // @public
 export function renderWithEffects(
   nodes: ReactElement,
-  options?: Pick<RenderOptions, 'wrapper'>,
+  options?: Pick<RenderOptions, 'wrapper'> & LegacyRootOption,
 ): Promise<RenderResult>;
 
 // @public

packages/test-utils/package.json

@@ -55,22 +55,20 @@
     "@backstage/types": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
-    "@testing-library/dom": "^8.0.0",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^14.0.0",
     "@types/react": "^16.13.1 || ^17.0.0",
     "cross-fetch": "^3.1.5",
     "i18next": "^22.4.15",
     "zen-observable": "^0.10.0"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0",
+    "@testing-library/react": "^12.1.3 || ^13.0.0 || ^14.0.0",
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
+    "@testing-library/jest-dom": "^5.10.1",
     "msw": "^1.0.0"
   },
   "files": [

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<PropsWithChildren<{}>> | ReactNode,
-  options: TestAppOptions = {},
+  options: TestAppOptions & LegacyRootOption = {},
 ): Promise<RenderResult> {
   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,
   });
 }
 

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<RenderOptions, 'wrapper'>,
+  options?: Pick<RenderOptions, 'wrapper'> & LegacyRootOption,
 ): Promise<RenderResult> {
   let value: RenderResult;
   await act(async () => {