From 38ab551a9f545374598dcac95fad59379fcffc83 Mon Sep 17 00:00:00 2001 From: Bob Ippolito Date: Tue, 7 May 2024 08:04:19 -0700 Subject: [PATCH] handle react-dom/test-utils deprecation --- packages/lexical-devtools/tsconfig.json | 1 + .../src/__tests__/unit/LexicalHistory.test.tsx | 12 ++++++------ .../__tests__/unit/LexicalComposer.test.tsx | 2 +- .../unit/PlainRichTextPlugin.test.tsx | 2 +- .../unit/useLexicalIsTextContentEmpty.test.tsx | 2 +- .../lexical-react/src/__tests__/unit/utils.tsx | 2 +- .../__tests__/unit/LexicalSelection.test.tsx | 2 +- .../unit/LexicalTableSelection.test.tsx | 2 +- .../unit/LexicalEventHelpers.test.tsx | 2 +- .../src/__tests__/unit/LexicalEditor.test.tsx | 2 +- .../__tests__/unit/LexicalListPlugin.test.tsx | 2 +- packages/lexical/src/__tests__/utils/index.tsx | 2 +- .../__tests__/unit/LexicalElementNode.test.tsx | 2 +- .../__tests__/unit/LexicalTextNode.test.tsx | 2 +- packages/shared/src/react-test-utils.ts | 18 ++++++++++++++++++ tsconfig.build.json | 1 + tsconfig.json | 1 + 17 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 packages/shared/src/react-test-utils.ts diff --git a/packages/lexical-devtools/tsconfig.json b/packages/lexical-devtools/tsconfig.json index 8978b961e03a..ddfcd95c055a 100644 --- a/packages/lexical-devtools/tsconfig.json +++ b/packages/lexical-devtools/tsconfig.json @@ -158,6 +158,7 @@ "shared/environment": ["../shared/src/environment.ts"], "shared/invariant": ["../shared/src/invariant.ts"], "shared/normalizeClassNames": ["../shared/src/normalizeClassNames.ts"], + "shared/react-test-utils": ["../shared/src/react-test-utils.ts"], "shared/simpleDiffWithCursor": ["../shared/src/simpleDiffWithCursor.ts"], "shared/useLayoutEffect": ["../shared/src/useLayoutEffect.ts"], "shared/warnOnlyOnce": ["../shared/src/warnOnlyOnce.ts"] diff --git a/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx b/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx index 4b13bb94fa2e..5e066509c5f9 100644 --- a/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx +++ b/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx @@ -35,7 +35,7 @@ import { import {createTestEditor, TestComposer} from 'lexical/src/__tests__/utils'; import React from 'react'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; describe('LexicalHistory tests', () => { let container: HTMLDivElement | null = null; @@ -128,8 +128,8 @@ describe('LexicalHistory tests', () => { await ReactTestUtils.act(async () => { await editor.update(() => { const root = $getRoot(); - const paragraph1 = createParagraphNode('AAA'); - const paragraph2 = createParagraphNode('BBB'); + const paragraph1 = $createParagraphNode_('AAA'); + const paragraph2 = $createParagraphNode_('BBB'); // The editor has one child that is an empty // paragraph Node. @@ -223,7 +223,7 @@ describe('LexicalHistory tests', () => { await ReactTestUtils.act(async () => { await editor.update(() => { const root = $getRoot(); - const paragraph = createParagraphNode('foo'); + const paragraph = $createParagraphNode_('foo'); root.append(paragraph); }); }); @@ -261,7 +261,7 @@ describe('LexicalHistory tests', () => { await ReactTestUtils.act(async () => { await editor.update(() => { const root = $getRoot(); - const paragraph = createParagraphNode('foo'); + const paragraph = $createParagraphNode_('foo'); root.append(paragraph); }); }); @@ -315,7 +315,7 @@ describe('LexicalHistory tests', () => { }); }); -const createParagraphNode = (text: string) => { +const $createParagraphNode_ = (text: string) => { const paragraph = $createParagraphNode(); const textNode = $createTextNode(text); diff --git a/packages/lexical-react/src/__tests__/unit/LexicalComposer.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalComposer.test.tsx index 145192b12874..ae9da26b1e83 100644 --- a/packages/lexical-react/src/__tests__/unit/LexicalComposer.test.tsx +++ b/packages/lexical-react/src/__tests__/unit/LexicalComposer.test.tsx @@ -15,7 +15,7 @@ import { } from 'lexical'; import * as React from 'react'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import {LexicalComposer} from '../../LexicalComposer'; diff --git a/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx index 42bfea40230f..60f5c8b269d4 100644 --- a/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx +++ b/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx @@ -26,7 +26,7 @@ import { } from 'lexical'; import * as React from 'react'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import {LexicalComposer} from '../../LexicalComposer'; import {ContentEditable} from '../../LexicalContentEditable'; diff --git a/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmpty.test.tsx b/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmpty.test.tsx index 652946f168b7..9d1c30f7bdf7 100644 --- a/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmpty.test.tsx +++ b/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmpty.test.tsx @@ -17,7 +17,7 @@ import { import * as React from 'react'; import {createRef} from 'react'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import {useLexicalIsTextContentEmpty} from '../../useLexicalIsTextContentEmpty'; diff --git a/packages/lexical-react/src/__tests__/unit/utils.tsx b/packages/lexical-react/src/__tests__/unit/utils.tsx index c8c4beeba724..32c75551785e 100644 --- a/packages/lexical-react/src/__tests__/unit/utils.tsx +++ b/packages/lexical-react/src/__tests__/unit/utils.tsx @@ -11,7 +11,7 @@ import {LexicalEditor} from 'lexical'; import * as React from 'react'; import {Container} from 'react-dom'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import * as Y from 'yjs'; import {useCollaborationContext} from '../../LexicalCollaborationContext'; diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx index f7bb508d6cd2..d95377cc823b 100644 --- a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx +++ b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx @@ -48,7 +48,7 @@ import { TestComposer, } from 'lexical/src/__tests__/utils'; import {createRoot} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import { applySelectionInputs, diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx index 7112c101222d..a3dab04aef05 100644 --- a/packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx +++ b/packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx @@ -21,7 +21,7 @@ import { import {createTestEditor} from 'lexical/src/__tests__/utils'; import {createRef, useEffect, useMemo} from 'react'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; describe('table selection', () => { let originalText: TextNode; diff --git a/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx b/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx index 089dd086ad17..162ffcfd281c 100644 --- a/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx +++ b/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx @@ -25,7 +25,7 @@ import {TableCellNode, TableNode, TableRowNode} from '@lexical/table'; import {LexicalEditor} from 'lexical'; import {initializeClipboard, TestComposer} from 'lexical/src/__tests__/utils'; import {createRoot} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; jest.mock('shared/environment', () => { const originalModule = jest.requireActual('shared/environment'); diff --git a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx index bcc1d1add5b1..25be995d57b2 100644 --- a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx +++ b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx @@ -50,7 +50,7 @@ import { } from 'react'; import {createPortal} from 'react-dom'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import { $createTestDecoratorNode, diff --git a/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx b/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx index f9e6544fe955..dcd9c3b6bba5 100644 --- a/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx +++ b/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx @@ -22,7 +22,7 @@ import { TestComposer, } from 'lexical/src/__tests__/utils'; import {createRoot, Root} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import { INSERT_UNORDERED_LIST_COMMAND, diff --git a/packages/lexical/src/__tests__/utils/index.tsx b/packages/lexical/src/__tests__/utils/index.tsx index c09e062d8f04..3861e8c7f6eb 100644 --- a/packages/lexical/src/__tests__/utils/index.tsx +++ b/packages/lexical/src/__tests__/utils/index.tsx @@ -43,7 +43,7 @@ import {format} from 'prettier'; import * as React from 'react'; import {createRef} from 'react'; import {createRoot} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import {CreateEditorArgs, LexicalNodeReplacement} from '../../LexicalEditor'; import {resetRandomKey} from '../../LexicalUtils'; diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx index 94090d327462..21e9ed3c899e 100644 --- a/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx +++ b/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx @@ -19,7 +19,7 @@ import { import * as React from 'react'; import {createRef, useEffect} from 'react'; import {createRoot} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import { $createTestElementNode, diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx index a90e2de3300f..b034c96814ab 100644 --- a/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx +++ b/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx @@ -24,7 +24,7 @@ import { import * as React from 'react'; import {createRef, useEffect, useMemo} from 'react'; import {createRoot} from 'react-dom/client'; -import * as ReactTestUtils from 'react-dom/test-utils'; +import * as ReactTestUtils from 'shared/react-test-utils'; import { $createTestSegmentedNode, diff --git a/packages/shared/src/react-test-utils.ts b/packages/shared/src/react-test-utils.ts new file mode 100644 index 000000000000..8e086744d5e8 --- /dev/null +++ b/packages/shared/src/react-test-utils.ts @@ -0,0 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ +import * as React from 'react'; +import * as ReactTestUtils from 'react-dom/test-utils'; + +/** + * React 19 moved act from react-dom/test-utils to react + * https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils + */ +export const act = + 'act' in React + ? (React.act as typeof ReactTestUtils.act) + : ReactTestUtils.act; diff --git a/tsconfig.build.json b/tsconfig.build.json index 6b35fbf19ed5..0de1e0874188 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -161,6 +161,7 @@ "shared/normalizeClassNames": [ "./packages/shared/src/normalizeClassNames.ts" ], + "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"], "shared/simpleDiffWithCursor": [ "./packages/shared/src/simpleDiffWithCursor.ts" ], diff --git a/tsconfig.json b/tsconfig.json index e106a0d58b1e..2e1958aa7f81 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -169,6 +169,7 @@ "shared/normalizeClassNames": [ "./packages/shared/src/normalizeClassNames.ts" ], + "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"], "shared/simpleDiffWithCursor": [ "./packages/shared/src/simpleDiffWithCursor.ts" ],