From b551349b40e22cda0a9a5dc5ab93343c55ec8b1f Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Thu, 24 Aug 2023 12:21:09 +0200 Subject: [PATCH 1/4] Make test-utils not depend on testing-library directly This should help transition to React 18 Signed-off-by: Axel Hecht --- packages/test-utils/package.json | 6 ++---- yarn.lock | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 1ba9c0229e..7ca8b36098 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -55,21 +55,19 @@ "@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", "zen-observable": "^0.10.0" }, "peerDependencies": { + "@testing-library/react": "^12.1.3", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.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": [ diff --git a/yarn.lock b/yarn.lock index fd7e43d30c..fb9e9e34aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10049,7 +10049,6 @@ __metadata: "@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 @@ -10058,6 +10057,7 @@ __metadata: msw: ^1.0.0 zen-observable: ^0.10.0 peerDependencies: + "@testing-library/react": ^12.1.3 react: ^16.13.1 || ^17.0.0 react-dom: ^16.13.1 || ^17.0.0 react-router-dom: 6.0.0-beta.0 || ^6.3.0 From 80a76accf5c8223f967eef3b88c02f9790ead8fb Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Fri, 25 Aug 2023 18:05:29 +0200 Subject: [PATCH 2/4] Expand version ranges of peer dependencies to include React 18 and the corresponding testing libraries Signed-off-by: Axel Hecht --- packages/test-utils/package.json | 6 +++--- yarn.lock | 8 +++----- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 7ca8b36098..88985f4bdb 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -60,9 +60,9 @@ "zen-observable": "^0.10.0" }, "peerDependencies": { - "@testing-library/react": "^12.1.3", - "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": { diff --git a/yarn.lock b/yarn.lock index fb9e9e34aa..3815966168 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10050,16 +10050,14 @@ __metadata: "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@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 msw: ^1.0.0 zen-observable: ^0.10.0 peerDependencies: - "@testing-library/react": ^12.1.3 - 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 languageName: unknown linkType: soft From 9ceb6195275af2c75608de1cc0e1bceec0e51f6a Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Mon, 4 Sep 2023 09:39:02 +0200 Subject: [PATCH 3/4] Add legacyRoot option, add changeset Signed-off-by: Axel Hecht --- .changeset/three-nails-remember.md | 7 +++++++ packages/test-utils/api-report.md | 9 +++++++-- packages/test-utils/src/testUtils/appWrappers.tsx | 6 ++++-- packages/test-utils/src/testUtils/testingLibrary.ts | 9 ++++++++- 4 files changed, 26 insertions(+), 5 deletions(-) create mode 100644 .changeset/three-nails-remember.md 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 () => { From 3419e2ec54d4dc6c65f4403c9ca32aad87847a3f Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Mon, 4 Sep 2023 13:37:23 +0200 Subject: [PATCH 4/4] Fix vale Signed-off-by: Axel Hecht --- .changeset/three-nails-remember.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/three-nails-remember.md b/.changeset/three-nails-remember.md index e5bc83b9d3..6df9b43801 100644 --- a/.changeset/three-nails-remember.md +++ b/.changeset/three-nails-remember.md @@ -4,4 +4,4 @@ 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. +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.