handle react-dom/test-utils deprecation

facebook · May 7, 2024 · 38ab551 · 38ab551
1 parent 0cf183d
commit 38ab551
Show file tree

Hide file tree

Showing 17 changed files with 39 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
       ],