From b418dbaeef5b88d60eed1699509b2fa0d7bb01b5 Mon Sep 17 00:00:00 2001
From: David Calhoun <438664+dcalhoun@users.noreply.github.com>
Date: Thu, 13 Jan 2022 06:06:03 -0600
Subject: [PATCH] Fix erroneous react-dom usage in native tests (#37921)

* Reinstate react-platform.native.js file

This file was removed in the following commit, as it was no longer
strictly necessary. https://github.com/WordPress/gutenberg/commit/b7b62d2d3db4395ce5d2ad42bd1fc0f1c3c2f12d#diff-f02069349f238fb47a268bb7fcc03c9768331db18ead0e28d8ecad7bbc05037c

However, the removal led to Jest loading the DOM-specific version of the
file when mocking Gutenberg modules that depended upon
`react-platform.js`. Jest would seemingly load `react-dom` when
attempting to auto-mock a module, e.g. `jest.mock( '@wordpress/data/src/components/use-select' );`.

The loading of `react-dom` resulted in the following error:

```
TypeError: Cannot use 'in' operator to search for 'WebkitAnimation' in undefined

  at getVendorPrefixedEventName (node_modules/react-dom/cjs/react-dom.development.js:5011:58)
  at node_modules/react-dom/cjs/react-dom.development.js:5019:21
  at Object.<anonymous> (node_modules/react-dom/cjs/react-dom.development.js:26261:5)
  at Object.<anonymous> (node_modules/react-dom/index.js:37:20)
```

Reinstating `react-platform.native.js` addresses this issue by ensuring
that Jest does not encounter an import of `react-dom`.

* Fix false-positive ReactNativeEditor test

This test failed when run in isolation. It would appear it was dependent
upon the `jest.mock('../setup')` found in sibling tests.

After defining a mock for this specific test, it was discovered that the
assertion did not await the asynchronous query found within the test.
The assertion resulted in a false-positive as the returned query
`Promise` technically matches `toBeDefined`. `async`/`await` was added
to ensure the test assertion awaits the query result, as well as fixes
the following related log warning.

```
A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
```
---
 packages/element/src/react-platform.native.js  | 14 ++++++++++++++
 packages/react-native-editor/src/index.js      |  5 ++---
 .../react-native-editor/src/test/index.test.js | 18 ++++++++++++++----
 3 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 packages/element/src/react-platform.native.js

diff --git a/packages/element/src/react-platform.native.js b/packages/element/src/react-platform.native.js
new file mode 100644
index 0000000000000..4556ea0b845c0
--- /dev/null
+++ b/packages/element/src/react-platform.native.js
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { AppRegistry } from 'react-native';
+
+/**
+ * Registers an app root component allowing the native system to run the app.
+ *
+ * @param {string}   appKey            Unique app name identifier.
+ * @param {Function} componentProvider Function returning the app root React component.
+ */
+export const registerComponent = ( appKey, componentProvider ) => {
+	AppRegistry.registerComponent( appKey, componentProvider );
+};
diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
index cb3128ea5cf7c..85ba6915e9447 100644
--- a/packages/react-native-editor/src/index.js
+++ b/packages/react-native-editor/src/index.js
@@ -2,13 +2,12 @@
  * External dependencies
  */
 import 'react-native-gesture-handler';
-import { AppRegistry } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { applyFilters, doAction } from '@wordpress/hooks';
-import { Component, cloneElement } from '@wordpress/element';
+import { Component, cloneElement, registerComponent } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -77,7 +76,7 @@ const registerGutenberg = ( {
 		}
 	}
 
-	AppRegistry.registerComponent( 'gutenberg', () => Gutenberg );
+	registerComponent( 'gutenberg', () => Gutenberg );
 };
 
 export { initialHtml as initialHtmlGutenberg, registerGutenberg, setupLocale };
diff --git a/packages/react-native-editor/src/test/index.test.js b/packages/react-native-editor/src/test/index.test.js
index c734603279ea4..223f4247a4069 100644
--- a/packages/react-native-editor/src/test/index.test.js
+++ b/packages/react-native-editor/src/test/index.test.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AppRegistry } from 'react-native';
+import { AppRegistry, Text } from 'react-native';
 import { render, waitFor } from 'test/helpers';
 
 /**
@@ -176,9 +176,19 @@ describe( 'Register Gutenberg', () => {
 		expect( hookCallOrder ).toBeGreaterThan( onRenderEditorCallOrder );
 	} );
 
-	it( 'initializes the editor', () => {
-		const { getByTestId } = initGutenberg();
-		const blockList = waitFor( () => getByTestId( 'block-list-wrapper' ) );
+	it( 'initializes the editor', async () => {
+		const MockEditor = () => <Text>Mock Editor</Text>;
+		jest.mock( '../setup', () => {
+			return {
+				__esModule: true,
+				default: jest.fn( () => <MockEditor /> ),
+			};
+		} );
+
+		const screen = initGutenberg();
+		const blockList = await waitFor( () =>
+			screen.getByText( 'Mock Editor' )
+		);
 		expect( blockList ).toBeDefined();
 	} );
 } );